Change border color of text input node

[Aisutera]

Hi! i wanna dynamically change the border colour based on user input and I encountered the same issue from with this post:

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!

but somehow the solution there, does not work for me, i tried to copy paste the code in that post , but I still can not put the border for my text input node.

[jbudd]

Hi @Aisutera

Assuming that you have a reasonably up to date version of Node-red, you can do it like this:

Send a message to the text input which has msg.className set - eg msg.className = "red"
Use a template node to define css applicable to <div class="nr-dashboard-textinput red">

[{"id":"ee097897554f457d","type":"ui_text_input","z":"2bfc647470de92f1","name":"","label":"","tooltip":"","group":"c6801e74081486d4","order":1,"width":0,"height":0,"passthru":false,"mode":"text","delay":300,"topic":"topic","sendOnBlur":true,"className":"","topicType":"msg","x":460,"y":120,"wires":[[]]},{"id":"ea7d78e960299ecc","type":"ui_template","z":"2bfc647470de92f1","group":"c6801e74081486d4","name":"CSS styles","order":1,"width":0,"height":0,"format":"<style>\n.nr-dashboard-textinput.red {\nborder: 1px solid red;\n}\n.nr-dashboard-textinput.green {\nborder: 1px solid green;\n}\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":110,"y":60,"wires":[[]]},{"id":"f11835123a2d4b37","type":"ui_button","z":"2bfc647470de92f1","name":"","group":"c6801e74081486d4","order":2,"width":0,"height":0,"passthru":false,"label":"red","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"red","payloadType":"str","topic":"topic","topicType":"msg","x":90,"y":100,"wires":[["fbe9346917a26635"]]},{"id":"d3dbefb3996c987f","type":"ui_button","z":"2bfc647470de92f1","name":"","group":"c6801e74081486d4","order":2,"width":0,"height":0,"passthru":false,"label":"green","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"green","payloadType":"str","topic":"topic","topicType":"msg","x":90,"y":140,"wires":[["fbe9346917a26635"]]},{"id":"fbe9346917a26635","type":"change","z":"2bfc647470de92f1","name":"","rules":[{"t":"move","p":"payload","pt":"msg","to":"className","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":270,"y":120,"wires":[["ee097897554f457d"]]},{"id":"c6801e74081486d4","type":"ui_group","name":"Default","tab":"da2aec15ed6c8eb2","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"da2aec15ed6c8eb2","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

[Aisutera]

Thankyou very much @jbudd

It is working right now with your code! Really appreciate that!

[Giamma]

Thank you from me too ....