How to style dropdown selectors in Unity UI Toolkit
One of Unity 2022.3 LTS’s big features was the fact that UI Toolkit is now finally out of preview. Going forward, we can expect more and more UIs to be built in UI Toolkit, so it’s a good idea to familiarize yourself with some of the more common pitfalls.
One of those pitfalls comes in the form of Dropdowns. Like all regular components in UI Framework, dropdowns already have a fair number of style classes built in if we inspect the element. We can adjust the stylings on these classes, or add our own styling rules as overrides.
Using these builtin classes, we can change the default styling of our dropdown field from this fairly boring one:
…to a more interesting one that’s better suited for our game or app (I’m not a designer, please just pretend like this looks very cool and professional).
Again, there are a million ways you can handle your stylings here, so use whichever you feel is the right choice for your project. Once you’re done, head over to the main Unity window and test your new dropdown in Play Mode:
So how do we change the style of this dropdown selector? A quick glance into the official documentation reveals the class name(s) we need to adjust here: .unity-base-dropdown is the base container, and its children are called .unity-base-dropdown__item, .unity-base-dropdown__checkmark and so on. There’s also a .unity-scroll-view child as well as a #unity-content-container, which hold all the selectable items, so we probably want to adjust them too. Let’s add them to our style sheet and see what happens:
If you want, you can copy my stylesheet and paste it into your project. Please note that because the UI Builder still has a few issues, you can only preview dropdown menus in Play Mode, not in UI Builder’s Preview Mode. If you don’t want to use a custom FontAsset for your label, just remove line 20 from the .uss file. Unity won’t be able to read the stylesheet otherwise.
Huh, this is weird. Nothing happened. Even though the class names are correct. Let’s go into the UI Debugger and check what’s going on:
If we check out our Panel Settings we can see what the problen is: The Source Asset itself has any number of stylesheets associated with it. We defined these at design time, all the components in this UI document (marked in red) will take their stylings from those stylesheets. So far so good.
Once Unity creates a dropdown menu, it will create a seperate layer on top of our UI Document (marked in green) so our selection menu will show up above all other elements. As the element with the class .unity-base-dropdown and its children are not themselves a child of our Source Asset, they won’t inherit its stylesheets. I honestly don’t know whether this is a bug or intended behaviour, but luckily we can fix it either way.
Navigate to your UI Document GameObject, select your Panel Settings, and from there, the UnityDefaultRuntimeTheme (or whatever other Theme Style Sheet you have configured). Now, add your stylesheet to the list. If you did everything correctly, your styling should now work for all applicable components in your UI.
Much better! For larger projects, it’s a good idea to have a stylesheet with general-use stylings for things like text and popout-boxes, so you don’t accidentally override styles for components you don’t mean to. But for now, this will conclude our little excursion into UI Toolkit.
Until next time!
