Question [Runtime] Changing selection color on a ListView

Bad solution: overwrite the background color of each selected item in the ListView. Then I also have to manage when an item is hovered (and change color accordingly). That's messy and redoes the job ListView is already doing.

What's a better way to do it? Can I change a StyleSheet linked to the items? Should I extend ListView somehow?

Thanks!

 

@jonathanma_unity Wow, that was pretty simple. Thank you!

 

@jonathanma_unity I found two other selectors:

.unity-list-view__item--alternative-background

.unity-list-view__item--drag-hover

Changing their background color did nothing. The code you provided did work. Am I missing something?

Also, I dug into

DefaultCommonDark_inter.uss.asset

to find those selectors. Is there a way to see them in the UITK Debugger?

 

Alright, I figured it out.

Code (CSharp):

1. .unity-list-view__item {
2.     background-color: red;
3. }
4.  
5. .unity-list-view__item:hover {
6.     background-color: blue;
7. }
8.  
9. .unity-list-view__item--selected {
10.     background-color: yellow;
11. }
12.  
13. .unity-list-view__item--selected:hover {
14.     background-color: green;
15. }

For anyone stumbling upon this: The 'selected' selectors have to be after the normal ones. Otherwise they are ignored/overwritten by the others.

 

@jonathanma_unity When I select an item in the list and then select something from another list I'd like the first selection to fade out a bit (by changing the selection color from blue to grey). So I can't have "active" selections in several places. Is there a good way to do this currently?

First idea is to change the USS at runtime, but I don't think that's possible? And neither is swapping USS files?

 

I'm using Unity 2022.1.0b11.2843
I try your script but "--selected" and "--selected:hover" don't work.

and I found out this is OK for me:

.unity-list-view__item:selected {
color: blue;
background-color: yellow;
}

.unity-list-view__item:selected:hover {
color: red;
background-color: green;
}

Just change --selected to :selected.

But according to https://docs.unity3d.com/2022.2/Documentation/Manual/UIE-USS-Selectors.html
":selected N/A. Unity does not use this pseudo-state."
I think the document is lack of updates.

 

Thank you! :checked works for me
I hope if the document:

selected: N/A. Unity does not use this pseudo-state.

declare this point will be better, for example:

selected: N/A. Unity does not use this pseudo-state. use :checked instead.

 

How can I achieve this through C# code? I need to make these changes, but I cannot do it through styles.thanks