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.
deadfabulouschrysalis
Unity: 2021.3.12f1
What am I missing, many thanks in advance.
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 Unity - Manual: Pseudo-classes for information about pseudo classes. Pseudo classes are used for selecting elements that are hovered over, focused, disabled etc.
@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!
I was able to change the focus colour as follows:
.unity-base-field:focus .unity-label {
color: var(--fs-font-color-fancy-button-active);
}
Any solution to this? bilalakil answer doesn’t work.
Clicking on a slider control, for example, changes the text of the control to #00526A, which this page describes as “The text color for a label when it has focus”.
I tried every combination of classes and even control IDs, and can’t seem modify the default focus color.
Hey @StripeGuy. The selector posted above works for me in Unity 6 for sliders:
.unity-base-field:focus .unity-label {
color: rgb(255, 0, 0);
}
Which Unity version are you using?
Hey cpalma-unity.
Sorry, I don’t check these forums very often. Unfortunately, it’s still an issue. We’re using LTS 2022 (2022.3.42 currently). We can’t use Unity 6 at the moment because of a specific issue they haven’t resolved yet.
The uss code you posted doesn’t work. I did see in another post somewhere a while back that it might be an issue with this LTS version they won’t bother resolving because it’s minor (it’s a pretty important UI detail if you ask us).
I’m posting a gif of the issue if it helps anyone find a solution. It only affects the color of the checkbox text when clicking on the checkbox itself, not the text as you can see. (we added a custom checkbox image fyi).
Hi,
@StripeGuy: I was able to change the text color when the element has focus. Looking at the debugger we see the matching selector is:
.unity-base-field:focus:enabled > .unity-base-field__label
You can simply override, here the color is red when the item is in focus:
I assume this solution is also valid for this post:
This is using unity 2022.3.42f1
