I’m trying to style a DropdownField control (one of the standard controls provided by Unity). I can click on the control and see the Style Class List (i.e., .unity-base-field, .unity-popup-field, etc.). I can then override those styles in my USS.
The problem is, some elements of the control aren’t visible in the hierarchy. How do I determine which styles these elements are using? In the case of the DropdownField, the hierarchy does not display the elements in the dropdown menu where the list of choices is displayed.
How do I determine which styles to override? Is there documentation somewhere that has a list of these styles? I couldn’t find any.
Any clue why some items do not inherit from my stylesheet? I’m trying to style the DropdownField where it pops open the choices drawer… Finally was able to find the relevant class names, but my styles don’t apply.
We just pushed an update to our documentation, in the UXML controls reference you will now see the list of USS classes available for a type of element. That includes also the children of the element.
That information was already available partially through the API reference, but it’s now easier to browse and more important you will see the values to use when writing USS selectors.
But even when I target every single one of the classes, my styles are not being picked up. The select input, yes, bot the dropdown drawer, no.
When I look in the UI debugger, I see that this drawer is created as a global node, separate from all my other UXML doc hierarchies, and it only receives styles from the “UnityDefaultRuntimeTheme”, but not my “Menu.uss” that holds all my styles
Ah yes! It’s a pretty big issue for that specific control, that we just “realized” very recently internally.
If you don’t mind I will rename your thread “Re-styling DropdownField” hopefully it help some people in the future until we find a proper fix for this.
I guess I kinda hijacked this thread, but I think you’re right to update it… I’ll also reference my Stack Overflow post with my original question and the conclusion I arrived at… That post already links here, so now I’ll link back
Is there a “proper fix” yet? I tried the PanelSettings default override thing, which worked, but had the weird side effect of messing up the preview of my styling in UI builder. Here it is before the fix:
Notice how all my over-writing of default button styles is now gone in the Builder preview. When I actually play the thing it works fine, all my styles are applied, but not having an accurate static preview is a problem for my workflow with outside stakeholders.
Sorry to post again before a reply, but also, does anyone know exactly where the list item hover-over effect is coming from? When the dropdown option box is up and you mouse over a choice it changes to a blue background color and white text. I would like to change this style, use a different color, perhaps a different border or shape on the blue-colored bit, etc. Because it shuts off when I scroll off I can’t seem to catch it in the debugger. Also, I see no :hover styles anywhere.
Hey! The selectors used to customize the dropdown items are .unity-base-dropdown__item:hover and .unity-base-dropdown__item:hover > .unity-base-dropdown__label The first one is for the background and the second one for the label.
The unity dev replied to you, but your question still relates to the issue at hand in this thread. Unity is not allowing us to change any of the stylings in the dropdown right now, including your hovers that you wish to change. We’ll have to wait for a fix to this. Soon I hope!
Is there a way to remove the scroll bars of the ScrollView that is created inside the dropdown panel. There are attributes “horizontal-scroller-visibility” and “vertical-scroller-visibility”, but how do I set these for a ScrollView that is added dynamically, also outside of the hierarchy and without a distinct name or class.
Since I struggled a lot with this, I decided to add my two cents for those who might renounce quicker than I did.
The inspector for the unity default runtime theme present the “default” theme (internal one) like the .tss that you created in your assets with the Create > UI Toolkit > Default Runtime Theme File
Furthermore, if you change the “default” theme with something else than “default”, you cannot go back to the default runtime theme without deleting the created .tss and recreating it or editing the file with a text editor.
If you want to check the content of the .tss file directly, it should look like the following (mainUI.uss being an additional uss with the dropdown item styling
If you’ve done everything right, the UI Toolkit Debugger will show the following stylesheets on the separate hierarchy that contains the items :
UnityDefaultRuntimeTheme
(default)
(mainUI)
And every style you defined should work properly.
If, for some reason, some are not applied, try to add elements to your selector in your .uss file: the more complex the selector is, the more precedence it has over the default ones (Look at the selector reference for more detail on composite selectors and priority)
Wouldn’t it be very easy to fix this on Unity’s end by simply adding the stylesheets to the generated dropdown menu which were attached to the original DropdownField? Looking at the reference source code I think this could be done in the BasePopupField script in the ShowMenu method starting at line 191.
The PanelSettings workaround feels pretty messy and also doesn’t allow multiple styles for dropdowns as they would all be using the styles from the PanelSettings.
