Change border color to text input node

Hi, I’ve been working on a home project using the dashboard ui nodes. I’ve been able to change dynamically the text and background colors of the buttons.

However, the one item I haven’t figured out is how to change the border color of the text input node.

I would like when the text input node receive a value greater than 30, then the border color to change to red.

Is it possible this with the text input node ?

Thank in advance!

try this, add a ui_template node with the following

<style>
.nr-dashboard-textinput {border: red 1px solid;}
</style>

zenofmund thanks for your help.
about my topic, I would like to change the border color of text input node dynamic, when I set a value greater than 25. Only then I want to change the border color to red. If the value is under 25 then the border color is the default.

[{"id":"21de8c1a.81d1e4","type":"ui_text_input","z":"af33edba.cb6b5","name":"","label":"Value 1","tooltip":"","group":"4e5b45cb.163f3c","order":16,"width":0,"height":0,"passthru":true,"mode":"number","delay":300,"topic":"","x":820,"y":680,"wires":[]},{"id":"8358eb06.7e9618","type":"inject","z":"af33edba.cb6b5","name":"","topic":"","payload":"12","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":490,"y":640,"wires":[["21de8c1a.81d1e4"]]},{"id":"fd6e60bf.63263","type":"inject","z":"af33edba.cb6b5","name":"","topic":"","payload":"25","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":490,"y":700,"wires":[["21de8c1a.81d1e4"]]},{"id":"4e5b45cb.163f3c","type":"ui_group","z":"","name":"Logo","tab":"68601be2.02e5e4","order":5,"disp":false,"width":"4","collapse":false},{"id":"68601be2.02e5e4","type":"ui_tab","z":"","name":"Home","icon":"dashboard","disabled":false,"hidden":true}]

Sorry I missed the greater thatn 25 bit. Try this in the template node and you will have to send the value to this node.

<style>
.nr-dashboard-textinput {border: {{((msg.payload > 25)) ? 'red' : 'transparent'}} 1px solid;}
</style>

thanks again. I appreciate your help.
The solution you send me work for all of the text input node in my form.
How can I use it, separately for every single text input node?:roll_eyes::roll_eyes::roll_eyes:

I knew that was going to be the next question....

You can put the text inputs in different groups and then use the ID of the group to target the CSS. The ID will be the tab name and group name with underscores in place of spaces. So in this example
27%20AM
if you wanted to apply it to the text input in group 2 you would use:
#UI_TESTS_Group_2 .nr-dashboard-textinput {border: {{((msg.payload > 25)) ? 'red' : 'transparent'}} 1px solid;}

thanks for your help zenofmud :slightly_smiling_face: