UIElements Text Field changing child elements?

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?

 

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!

 

For future people: To change the text color, I had to use ".my-text-field > .unity-label"

 

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?

 

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://forum.unity.com/threads/cas...ments-in-ui-builder-1-0-0-preview-16.1157585/

 

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.

 

'inputField.value = null' has done it! Thanks friend, much appreciated!

 

To elaborate a bit more for people as confused, as me, here's what worked for me:

Code (CSharp):

1. .input-field-color {
2. }
3.  
4. .input-field-color > .unity-base-field__input {
5.     background-color: rgb(255, 255, 255);
6. }

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:

1. ".theGloriousNameOfMyNewSelector",
2. this symbol '>' (the parent opperator)
3. 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!