Hey! I’m trying to recreate my old UI with the UIElements, but I’m stuck at creating an input field with the correct margin for the text, and background color, focus/active effects? The children are grayed out and I can’t change any of its styles or classes. Can I create my own Field element from a label, or do I need to use the supplied Text Field?
2 Likes
By:
can I assume you’re using the UI Builder to style your custom TextField?
If so, you can still change styles of internal (grayed out) elements. You just have to use a more complex USS selector. Here’s an example of changing the Label element inside a TextField to have a red border:
Note that the TextField has a custom class called .my-text-field and so to select in my styles the Label inside, I use the Inspector to see what style classes it has and use one along side the > parent operator in my selector: .my-text-field > .unity-base-field__label
9 Likes
Oh that makes so much sense! I’ve only recently started learning css & html and my brian didn’t couple “selector” to css selector for some reason ^^ Thanks a lot!
1 Like
For future people: To change the text color, I had to use “.my-text-field > .unity-label”
2 Likes
How to know specific unity default built in element’s class name? I want to change the input. How do I know input’s class name?
2 Likes
Hi, I could rebuild the example with the TextField but I have problem to change the icon of the Dropdown with this approach.
@uDamian would you be so kind to post am example of how to customise the dropdown icon of the Dropdown UIElement?
Thank you very much.
Hey friends, so I’ve managed to change the background colour of my input field (in UI Builder), but now I’m stumped trying to change the filler/placeholder text. I’ve tried accessing it with code with no success either. Any suggestions?
I may not be understanding you correctly, but the text color is from the Color style property.
Thanks for your response! And sorry I wasn’t clear - I mean changing the content of the placeholder text. At the moment it is stuck with “filler text”, but when I go to click on it, it only accesses the InputField label contents.
EDIT: On further inspection, it seems this is an issue with the ‘attributes’ dropdown not displaying in the inspector, as mentioned in this thread: https://discussions.unity.com/t/852377
Yes, you can’t edit attributes in the builder right now. You could just edit the UXML directly (with VS or text editor) or do it in code for now.
Here is an example:
<ui:TextField picking-mode="Ignore" label="Text Field" value="filler text 1" text="filler text 2" name="TextFieldText" />
At least at this time, the attribute “text” is the one that will do the initial fill of the displayed value, so you would see “filler text 2”. If you want to set it at runtime, you actually have to use the .value field.
2 Likes
‘inputField.value = null’ has done it! Thanks friend, much appreciated!
1 Like
To elaborate a bit more for people as confused, as me, here’s what worked for me:
.input-field-color {
}
.input-field-color > .unity-base-field__input {
background-color: rgb(255, 255, 255);
}
Where .unity-base-field__input is the one of the matching selectors for the TextField’s child element, as per @RKar 's answer.
Note, in the UI Builder, I assign the .input-field-color class to the TextField, not to its child.
Thanks, this seems to be the only thing that worked 
@uDamian is there a way to color part of a text field?
Just to help you out, and hopefully others can remix this advise for any other default Controls/Containers:
Lets assume you have a USS to save stuff on, and if you dont…
You right click where your supposed StyleSheets are (if you dont have one, just make a rando one for practice sake),
Right above it you’ll see a field for “Add new selector…”
So paste: .theGloriousNameOfMyNewSelector > .unity-base-field__input as the name of your new selector, or in that filed, and you’ll see Unity break the selector in three parts:
- “.theGloriousNameOfMyNewSelector”,
- this symbol ‘>’ (the parent opperator)
- and “.unity-base-field__input”
Now, your “.theGloriousNameOfMyNewSelector” is gonna help you overide parts of the “.unity-base-field__input” that’s not accessible to you. Press on the “.theGloriousNameOfMyNewSelector” part and on the side you can fiddle with USS properties For example, if you want want to change the text-field’s color maybe you do this:
-
Maybe change the Background Color,
-
Add a texture if your feeling spicy
-
Maybe change the border color
Whatever and however, just take anything on the left side of ‘v’ and drag it to, in this case, the #unity-text-input container
Now, what happens if you want to override OTHER properties in other pre-determined Unity USS “Standard” containers/controllers. Maybe you want Green Scrollers, textured Labels, easy.
Right now, as of Unity 2021.3 and Unity U.I. v1.0.0, you can’t finagle with anything in the default library – its just under lock. But with the power of this over-ride thing, you can experiment and figure out which part of say the natural Text-Field style classes “.unity-base-field” “.unity-base-field-text” “.unity-text-field” “.input-field-color” (or any of the other style classes in its children, maybe change the color of the Label or #unity-text-input) then just finagle and find out what style class you need to override.
For now, there’s no telling if the Unity Ui Editor will get updates to make dissecting the Controls, Library, or even make Ui Builder more convenient for non-coders and CSS folks, yet now you know, so gg, gl, and have fun!