Hi everyone,
I’m currently working on a small UX improvement for one of our customers, and I was wondering if anyone has already tackled something similar.
The issue is about multi-row selection in a grid. At the moment, the first selected row is visually more prominent than the following ones, because the background color uses a higher opacity:
- First selected row →
opacity: 0.12 - Additional selected rows →
opacity: 0.06
This difference is subtle, but it’s confusing for some users. (🙄) They expect all selected rows to look the same.
I’d like to make all selected rows visually identical, meaning the same background color and opacity for the first selected row and all subsequent selected rows.
My question
Has anyone:
- already tried to override the selection styling in the custom.css?
- or knows which CSS classes/selectors that are used for:
- the primary selected row
- additional selected rows
And how to make them visually identical?
Any hints, selector names, or best practices would be greatly appreciated!
Thanks in advance 😊
Christian