CSS for Grid Selection and Highlighting

Hi, can someone tell me what are the CSS sections in standard.css that set the grid highlighting and selection colors?

Thanks!

Hi @CGrantAnderson,

You can use your browser's developer tools to discover that easily. Here is how.

  1. Right click the element of interest (the selected data grid row) and select "Inspect element" or "Inspect" (the message depends on the browser). You should see something like this:
  2. The second CSS rule in the right-hand pane shows where the selected text color comes from:
    .rz-selectable .rz-datatable-even.rz-state-highlight .rz-cell-data, 
    .rz-selectable .rz-datatable-odd.rz-state-highlight .rz-cell-data {
        color: #1151F3;
    }
    
    It does not however specify the background color. To find what does that we select a parent element of the currently selected one (<span class="rz-cell-data">). This is the <td> element.
  3. The second rule in the right-hand pane is what we need:
    .rz-selectable .rz-datatable-even.rz-state-highlight > td, 
    .rz-selectable .rz-datatable-odd.rz-state-highlight > td {
        background-color: rgba(114, 152, 248, 0.16);
    }
    
    We can verify that by unchecking the background-color setting in the developer tools - this will remove the selected background of the row thus confirming this is indeed the CSS rule of our interest.
    css-inspect

Now that we have found the two rules that define the default selection appearance we can override them by adding the same CSS selectors with different values. We must add them after including the CSS of the Radzen.Blazor theme otherwise the overriding will not work (or require the !important setting).

     .rz-selectable .rz-datatable-even.rz-state-highlight .rz-cell-data, 
     .rz-selectable .rz-datatable-odd.rz-state-highlight .rz-cell-data {
         color: red; /* the text color */
    }

    .rz-selectable .rz-datatable-even.rz-state-highlight > td, 
    .rz-selectable .rz-datatable-odd.rz-state-highlight > td {
         background-color: green; /* the background color */
    }

Thank you so much for your very detailed and useful reply! The "even" and "odd" threw me...I was looking for a row highlight or something.

This works! I very much appreciate your help! Thanks again!