# Change border color to text input node

**URL:** <https://discourse.nodered.org/t/change-border-color-to-text-input-node/13288>\
**Category:** Dashboard\
**Created:** [15 July 2019 08:25 UTC](https://discourse.nodered.org/t/change-border-color-to-text-input-node/13288 "2019-07-15T08:25:56Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![sysman83](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sysman83/32/10112_2.png) [@sysman83](https://discourse.nodered.org/u/sysman83)\
**Post date:** [15 July 2019 08:25 UTC](https://discourse.nodered.org/t/change-border-color-to-text-input-node/13288/1 "2019-07-15T08:25:56Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [15 July 2019 09:08 UTC](https://discourse.nodered.org/t/change-border-color-to-text-input-node/13288/2 "2019-07-15T09:08:34Z")

</div>

try this, add a ui\_template node with the following

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

```

---

<div class="post-metadata">

**Author:** ![sysman83](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sysman83/32/10112_2.png) [@sysman83](https://discourse.nodered.org/u/sysman83)\
**Post date:** [15 July 2019 09:30 UTC](https://discourse.nodered.org/t/change-border-color-to-text-input-node/13288/3 "2019-07-15T09:30:05Z")

</div>

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}]

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [15 July 2019 10:59 UTC](https://discourse.nodered.org/t/change-border-color-to-text-input-node/13288/4 "2019-07-15T10:59:04Z")

</div>

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.

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

```

---

<div class="post-metadata">

**Author:** ![sysman83](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sysman83/32/10112_2.png) [@sysman83](https://discourse.nodered.org/u/sysman83)\
**Post date:** [15 July 2019 12:23 UTC](https://discourse.nodered.org/t/change-border-color-to-text-input-node/13288/5 "2019-07-15T12:23:33Z")

</div>

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?🙄🙄🙄

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [15 July 2019 12:55 UTC](https://discourse.nodered.org/t/change-border-color-to-text-input-node/13288/6 "2019-07-15T12:55:35Z")

</div>

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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/3/313208f5a2f7d26bf4c2fafccd09f304b606f521.png)  
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;}

---

<div class="post-metadata">

**Author:** ![sysman83](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sysman83/32/10112_2.png) [@sysman83](https://discourse.nodered.org/u/sysman83)\
**Post date:** [15 July 2019 16:19 UTC](https://discourse.nodered.org/t/change-border-color-to-text-input-node/13288/7 "2019-07-15T16:19:13Z")

</div>

thanks for your help zenofmud 🙂

---

<div class="post-metadata">

**Author:** ![arjak11](https://avatars.discourse-cdn.com/v4/letter/a/5f8ce5/32.png) [@arjak11](https://discourse.nodered.org/u/arjak11)\
**Post date:** [13 July 2022 14:40 UTC](https://discourse.nodered.org/t/change-border-color-to-text-input-node/13288/8 "2022-07-13T14:40:41Z")

</div>

Noted this is solved long ago. I'm am trying to do exactly the same thing but wondered if I can target the style down to the individual Text Input node under the same group... I tried to append to the ID but doesn't seem to work 🙄

#TabName\_GroupName\_NodeName

---

<div class="post-metadata">

**Author:** ![arjak11](https://avatars.discourse-cdn.com/v4/letter/a/5f8ce5/32.png) [@arjak11](https://discourse.nodered.org/u/arjak11)\
**Post date:** [13 July 2022 15:07 UTC](https://discourse.nodered.org/t/change-border-color-to-text-input-node/13288/9 "2022-07-13T15:07:26Z")

</div>

😇 I think I figured it out myself and will share it here in case someone is trying to do the same. Inspired by this thread: [Dashboard element css classes - #13 by Steve-Mcl](https://discourse.nodered.org/t/dashboard-element-css-classes/46447/13)

To target an individual node, use its node id (found in the sidebar under the Info tab), e.g.

```auto
<style>
[node-id="00000x00.x000x0"] {border: {{((msg.payload === "something")) ? 'red' : 'transparent'}} 1px dashed;}
</style>

```

Hope it helps~

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [13 July 2022 15:30 UTC](https://discourse.nodered.org/t/change-border-color-to-text-input-node/13288/10 "2022-07-13T15:30:14Z")

</div>

If you look a bit closer - at the end of that solution is this...

> [@Dashboard element css classes](https://discourse.nodered.org/t/dashboard-element-css-classes/46447/2):
>
> but I agree, having the ability to specify an additional `class` or classes on the UI items like button and label etc would simplify this somewhat.

That comment was some time ago and custom classes are now supported in dashboard - so while the above still works (it is valid CSS after all) there is a more elegant solution using classes now.

hope that helps.