Disable the highlight when using the checkbox

Hello,

Does anyone have a good idea on how to disable the .rz-state-highlight class?

I have a list of cars with checkboxes. When the first car is marked, it shows a highlight. If I then mark a second car and unmark the first one, the highlight remains on the first car.

I’ve tried the following CSS to remove the background highlight:

.rz-state-highlight {
background-color: transparent !important;
}

.rz-data-row.rz-state-highlight {
background-color: transparent !important;
}

However, this doesn’t seem to resolve the issue. Any suggestions?

Thank you!

I solved it by using

.rz-state-highlight td {
    background-color: transparent !important;
}

Hi @BlazorNerd,

This shouldn't happen. Could you please try to reproduce it in our demos?

Also, keep in mind that the rz-state-highlight style modifies the color too. If the DataGrid is striped, you can use the following css to override the style:

tr:not(.rz-expanded-row-content):nth-child(even) > td {
    background-color: var(--rz-grid-stripe-background-color) !important;
  
    .rz-cell-data {
      color: var(--rz-grid-cell-color) !important;
    }
}

tr:not(.rz-expanded-row-content):nth-child(odd) > td {
    background-color: var(--rz-grid-stripe-odd-background-color) !important;
  
    .rz-cell-data {
      color: var(--rz-grid-cell-color) !important;
    }
}

But again, this is unexpected behavior that I couldn't reproduce in the demos.