Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  2. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

Question How to override focus/highlight colour

Discussion in 'UI Toolkit' started by brainwipe, Dec 10, 2022.

  1. brainwipe

    brainwipe

    Joined:
    Aug 21, 2017
    Posts:
    78
    I have a very simple form shown below. I want the focus/highlight text to be white (255,255,255) when either the label or the input has focus. I have tried overriding --unity-selection-color with a more specific CSS selector but it doesn't have any effect.



    Unity: 2021.3.12f1

    What am I missing, many thanks in advance.
     
  2. Neutron

    Neutron

    Joined:
    Apr 25, 2011
    Posts:
    45
    You need to add the pseudo class selector :focus to your rule, so maybe something like --unity-selection-color:focus (not sure exactly which classname would be the one to override). See https://docs.unity3d.com/Manual/UIE-USS-Selectors-Pseudo-Classes.html for information about pseudo classes. Pseudo classes are used for selecting elements that are hovered over, focused, disabled etc.
     
  3. brainwipe

    brainwipe

    Joined:
    Aug 21, 2017
    Posts:
    78
    @Neutron thanks for the input - I tried all combinations of :active and :focus with various selectors. I think they don't work because Unity isn't really using CSS like the internet does - I think there are properties within the selectors that traverse the DOM to set more elements than the one in focus. That's how if you highlight the text input box, then the label is the thing that's highlighted.

    Looking forward to someone from Unity chiming in!
     
  4. bilalakil

    bilalakil

    Joined:
    Jan 28, 2018
    Posts:
    76
    I was able to change the focus colour as follows:

    Code (CSharp):
    1. .unity-base-field:focus .unity-label {
    2.     color: var(--fs-font-color-fancy-button-active);
    3. }
     
    VenetianFox likes this.