# Changing the Color and Font of the number shown by the number input widget

**URL:** <https://discourse.nodered.org/t/changing-the-color-and-font-of-the-number-shown-by-the-number-input-widget/99981>\
**Category:** Dashboard\
**Created:** [18 December 2025 18:14 UTC](https://discourse.nodered.org/t/changing-the-color-and-font-of-the-number-shown-by-the-number-input-widget/99981 "2025-12-18T18:14:01Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![JustRoger1956](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/justroger1956/32/81013_2.png) [@JustRoger1956](https://discourse.nodered.org/u/JustRoger1956)\
**Post date:** [18 December 2025 18:14 UTC](https://discourse.nodered.org/t/changing-the-color-and-font-of-the-number-shown-by-the-number-input-widget/99981/1 "2025-12-18T18:14:01Z")

</div>

Is there a simple example of changing the fonts and colors of both the label and the number independent of each other when using the number input widget for dashboard 2.0?

Regards,

Roger

---

<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:** [19 December 2025 06:48 UTC](https://discourse.nodered.org/t/changing-the-color-and-font-of-the-number-shown-by-the-number-input-widget/99981/2 "2025-12-19T06:48:03Z")

</div>

If all you want is to set these styles once, use a CSS type ui-template:

```auto
.nrdb-ui-number-input .v-field-label span {
    color: green;
    font-family: "Courier new";
}

.nrdb-ui-number-input .v-field__input {
    color: blue;
    font-family: "Comic sans ms";
}

```

To change them dynamically and independently set up class names in the template for each:

```auto
.redlabel .v-field-label span {
    color: red;
    font-family: "Segoe UI";
}
.bluelabel .v-field-label span {
    color: blue;
    font-family: "Helvetica";
}
.greeninput .v-field__input {
    color: green;
    font-family: "Comic sans ms";
}
.goldinput .v-field__input {
    color: gold;
    font-family: "Times New Roman";
}

```

And pass a message to the node with msg.ui\_control like this

```auto
{
"class": "redlabel greeninput"
}

```

---

<div class="post-metadata">

**Author:** ![JustRoger1956](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/justroger1956/32/81013_2.png) [@JustRoger1956](https://discourse.nodered.org/u/JustRoger1956)\
**Post date:** [22 December 2025 11:46 UTC](https://discourse.nodered.org/t/changing-the-color-and-font-of-the-number-shown-by-the-number-input-widget/99981/3 "2025-12-22T11:46:15Z")

</div>

I really appreciate the effort you made to help me out. Thank you and Merry Xmas. I will follow up with you a little later. Do you get on Discord at all I would like to show you how my Thermostat is currently working.

---

<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:** [21 January 2026 11:46 UTC](https://discourse.nodered.org/t/changing-the-color-and-font-of-the-number-shown-by-the-number-input-widget/99981/4 "2026-01-21T11:46:48Z")

</div>

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