UnityRef is currently in early development. Some features may be incomplete and/or not functioning.

UNITYREF

Your Pit Stop For Solving ANYTHING in Unity

ui

[UI Toolkit] Fix Overriding Dropdown Item Hover Styles

Solution

ui toolkitussaccessibilitystyling

Unity 2021.3.x - Unity 6.3.x

Published 30 days ago

Issue

 When customizing a DropdownField or PopupField, custom hover styles defined in USS or TSS for the .unity-base-dropdown__item class are frequently ignored. Despite applying background-color to the :hover state, UI Toolkit continues to display the default blue selection highlight.

Quick-Fix

To successfully override default Dropdown item hover states, you must increase specificity by appending the :enabled pseudo-class to your :hover selector.

Expand Analysis

The inability to apply custom hover styles to UI Toolkit dropdown items typically stems from insufficient CSS specificity. The default styles applied by the system often have a higher specificity than a simple :hover selector. To successfully override these default appearances, it is necessary to match or exceed the specificity of the existing style rules.

A common oversight is the omission of the :enabled pseudo-class in the selector. Many default UI Toolkit styles include :enabled as part of their rule set. Therefore, to ensure that custom background-color and color properties are applied during a hover event, the selector should explicitly include :enabled in conjunction with :hover. This increases the specificity of the custom rule, allowing it to take precedence over the default styles.

  1. Open your .uss stylesheet or .tss theme file.
  2. Locate the selector targeting .unity-base-dropdown__item.
  3. Modify the selector to include both pseudo-classes: .unity-base-dropdown__item:hover:enabled.
  4. Define your custom background-color and color properties within the curly braces.
  5. Save the file and ensure the stylesheet is correctly linked to your UIDocument or PanelSettings.

Additional Tips

  • Use the UI Toolkit Debugger (Window > UI Toolkit > Debugger) to inspect the dropdown popup at runtime; it often resides in a different panel than your main UI.
  • If the text color still does not change, apply the color property directly to the .unity-base-dropdown__label child element using the same specificity logic.
  • Avoid using !important as a first resort, as it can make future theme transitions or style overrides significantly more difficult to manage.

Copy


.unity-base-dropdown__item:hover:enabled
{
    background-color: rgb(204, 191, 81);
    color: rgb(45, 45, 45);
}

Related Posts Haven't quite found a solution to your problem? We think these posts might help you.

Content inspired by a Unity discussion post.