Skip to main content

Make multi-row selection visually consistent (same opacity for all selected rows)

  • June 23, 2026
  • 2 replies
  • 50 views
Christian Schmidtchen
Apprentice
Forum|alt.badge.img+1

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

2 replies

Bart Metselaar
Moderator
Forum|alt.badge.img+3

Hi Christian!

Beware of chaning the colors. The Thinkwise platform relies heavily on always having a row active, to make it possible to navigate through subjects with details and make it visually clear where the focus is.

Also in Multiselect situations, there is still a row ‘selected’, to show the content of that row in, for instance, the correlating form. 

Changing that row color will make it impossible to show the relation between those situation in all further situations. Even if a grid on a different page doesn't have a form, you are changing behaviour which is consistant in our platform. We highly advice against doing this.

Could you elaborate why your users expect the rows all look the same?

Kind regards!!

Bart Metselaar

Insert question, retrieve knowledge.
Christian Schmidtchen
Apprentice
Forum|alt.badge.img+1

Hi Bart,

Thanks for your response. My team and I actually fully agree with your reasoning and understand why Thinkwise consistently distinguishes the active row from the selected rows.

The request did not originate from us, but from one of our customers. Their concern is specifically related to multi-select scenarios. When multiple rows are selected, the active row is displayed differently from the other selected rows. Depending on the screen quality, brightness, or viewing angle, users sometimes have difficulty recognizing that all intended rows are already selected.

As a result, users occasionally assume that a row was not selected and click it again, unintentionally deselecting it. This can lead to mistakes in subsequent bulk-update actions because the final selection is different from what the user intended.

So the underlying request is not that all rows should always look the same, but rather that the visual distinction between the active row and the other selected rows can sometimes create uncertainty in multi-select use cases.

We understand and appreciate your concerns regarding consistency within the platform and the importance of always having a clearly identifiable active row. I just wanted to provide some additional context on the customer's observation.

Kind regards,

Christian

Terms & ConditionsAccessibility statement