# Change border color of text input node

**URL:** <https://discourse.nodered.org/t/change-border-color-of-text-input-node/68106>\
**Category:** Dashboard\
**Tags:** node-red-dashboard, function-node\
**Created:** [23 September 2022 00:39 UTC](https://discourse.nodered.org/t/change-border-color-of-text-input-node/68106 "2022-09-23T00:39:33Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Aisutera](https://avatars.discourse-cdn.com/v4/letter/a/a3d4f5/32.png) [@Aisutera](https://discourse.nodered.org/u/Aisutera)\
**Post date:** [23 September 2022 00:39 UTC](https://discourse.nodered.org/t/change-border-color-of-text-input-node/68106/1 "2022-09-23T00:39:33Z")

</div>

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](https://discourse.nodered.org/t/change-border-color-to-text-input-node/13288):
>
> 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.

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [23 September 2022 02:04 UTC](https://discourse.nodered.org/t/change-border-color-of-text-input-node/68106/2 "2022-09-23T02:04:07Z")

</div>

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">`

![Untitled 4](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/5/75cf126e307841a7e13798eea1cf770bbed83f25.jpeg)

```auto
[{"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}]

```

---

<div class="post-metadata">

**Author:** ![Aisutera](https://avatars.discourse-cdn.com/v4/letter/a/a3d4f5/32.png) [@Aisutera](https://discourse.nodered.org/u/Aisutera)\
**Post date:** [23 September 2022 02:32 UTC](https://discourse.nodered.org/t/change-border-color-of-text-input-node/68106/3 "2022-09-23T02:32:34Z")

</div>

Thankyou very much @jbudd

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

---

<div class="post-metadata">

**Author:** ![Giamma](https://avatars.discourse-cdn.com/v4/letter/g/e47774/32.png) [@Giamma](https://discourse.nodered.org/u/Giamma)\
**Post date:** [24 September 2022 06:26 UTC](https://discourse.nodered.org/t/change-border-color-of-text-input-node/68106/4 "2022-09-24T06:26:10Z")

</div>

Thank you from me too ....

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [8 October 2022 06:26 UTC](https://discourse.nodered.org/t/change-border-color-of-text-input-node/68106/5 "2022-10-08T06:26:58Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.