# Can not change the hint color of the v-text-field and v-select in Node-RED

**URL:** <https://discourse.nodered.org/t/can-not-change-the-hint-color-of-the-v-text-field-and-v-select-in-node-red/99292>\
**Category:** Dashboard\
**Tags:** dashboard-2, ui-template\
**Created:** [7 October 2025 11:05 UTC](https://discourse.nodered.org/t/can-not-change-the-hint-color-of-the-v-text-field-and-v-select-in-node-red/99292 "2025-10-07T11:05:12Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Kang](https://avatars.discourse-cdn.com/v4/letter/k/d6d6ee/32.png) [@Kang](https://discourse.nodered.org/u/Kang)\
**Post date:** [7 October 2025 11:05 UTC](https://discourse.nodered.org/t/can-not-change-the-hint-color-of-the-v-text-field-and-v-select-in-node-red/99292/1 "2025-10-07T11:05:12Z")

</div>

Hi, sir

Here is my code, and it is strange that the hint color is changed to orange in VPlay, however the hint color remains the same in my dashboard2.

Pls find this picture for the difference:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/c/dc5e62cb09509791637acc720b6988de03d32b73.png)

```html
<template>
  <div class="wrapperPara" ref="wrapper">
    <v-card v-for="(parameter,index) in item.paraItems" :key="index" ref="cards" class="cardPara">
      <v-card-text class="card-contentPara">
        <div class="containerPara">.
          <div class="leftPara">
            <i class="iconPara">{{ item.houseIcon }}</i>
          </div>
          <div class="middlePara">
            <div class="titlePara">{{ parameter.name }}</div>
            <div v-if="parameter.name!=='variable' && parameter.name!=='signal' "class="control-row">
              <button class="btnPara" :style="{ height:'25px', backgroundColor: parameter.isFixedValue ? '#90a4ae' : 'rgb(0, 204, 255)' }" @click="onFixed(index)">FIXED VALUE</button>
              <button class="btnPara" :style="{ height:'25px', backgroundColor: parameter.isFixedValue ? 'rgb(0, 204, 255)':'#90a4ae' }" @click="onVariable(index)">VARIABLE</button>
            </div>
            <div v-if="(parameter.name!=='variable' && parameter.name!=='signal') && parameter.isFixedValue===false " class="control-row">
              <v-text-field v-model="parameter.value" hint="Please input the value" persistent-hint class="paramsPara"></v-text-field>
              <v-text-field readonly class="paramsPara2">
                mm/s
              </v-text-field>
            </div>
            <div v-else class="control-row">
              <v-select hint="Plsease select the item" persistent-hint :items="variableNames" class="paramsPara">
              </v-select>
            </div>
          </div>
        </div>
      </v-card-text>

    </v-card>
  </div>
</template>

<script>
  export default {
  data() {
    return {
      variableNames:
      [
        'variable1',
        'variable2'
      ],
      item:
        {
          id:1,
          title: "Init position",
          houseIcon: "🏠",
          paraItems:[
          {
            type: "INPUT",
            name: "velocity",
            value: 100,
            isFixedValue: true
          },
          {
            type: "INPUT",
            name: "acceleration",
            value: 1000,
            isFixedValue: true
          },
          
          ]
          
        }
    };
  },
  methods: {
    // Initialize the value
    makeItem(payload) {
      this.item.id=payload.id;
      this.item.title= payload.title;
      this.item.houseIcon= payload.houseIcon;
      this.item.locationIcon= payload.locationIcon;
      this.item.paraItems=[];
      payload.paraItems.forEach((item, idx) => {
        this.item.paraItems.push(
          {            
            type: item.type,
            name: item.name,
            value: item.value,
            isFixedValue: false
          }
        )
        })
    },
    // Select the card
    onFixed(index) {
      this.item.paraItems[index].isFixedValue = false;
    },
    onVariable(index) {
      this.item.paraItems[index].isFixedValue = true;
    }
  },
  mounted() {
    //this.layoutGrid();
  },
  watch: {
        msg: function () 
        {
          if(this.msg.topic==="New parameters")
          {
            this.makeItem(this.msg.payload);
          }
        },
        deep:true
        }   
};
</script>

<style scoped>
  .wrapperPara {
    flex-direction: coloumn;
    align-items: flex-start;
    width: 100%;
    gap: 10px;
    overflow-y: auto;
    height: 100%;
    position: relative;
    border: none;

  }

  .cardPara {
    width: 100%;
    height: 150px;
    padding: 0;
    border: none;
  }

  .card-contentPara {
    display: flex;
    flex: 1;
    width: 100%;
    height: 100%;
    padding: 0;
  }

  .containerPara {
    display: flex;
    align-items: center;
    margin: 0;
    width: 100%;
    padding: 0;
    border: none;
    font-family: Arial, sans-serif;
    background: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
    justify-content: space-between;
    padding: 8px;
    position: relative;
  }

  .leftPara {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    margin-right: 10px;
  }

  .iconPara {
    margin: 0 3px;
    font-size: 14px;
  }

  .middlePara {
    flex: 1;
    justify-content: space-between;
    flex-direction: column;
  }

  .titlePara {
    font-weight: bold;
    margin-bottom: 5px;
    font-size: 20px;
  }
  .control-row {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
  }
  .paramsPara {
    flex: 4;
    font-size: 13px;
    color: #444;
    margin:0;
  }
  .paramsPara:deep(.v-messages__message) {
    color: #ff9800 !important;
  }
  .paramsPara2 {
    flex: 1;
    font-size: 13px;
  }
  .btnPara {
    flex: 1;
    color:white;
    font-weight: bold;
    font-size: 16px;
    min-width: 0;
  }
</style>

```

---

<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:** [7 October 2025 11:10 UTC](https://discourse.nodered.org/t/can-not-change-the-hint-color-of-the-v-text-field-and-v-select-in-node-red/99292/2 "2025-10-07T11:10:34Z")

</div>

> [@Kang](#):
>
> ```auto
> .paramsPara:deep(.v-messages__message) {
> color: #ff9800 !important;
> }
> 
> ```

Try

```css
  .paramsPara .v-messages__message {
    color: #ff9800 !important;
  }

```

---

<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 October 2025 11:11 UTC](https://discourse.nodered.org/t/can-not-change-the-hint-color-of-the-v-text-field-and-v-select-in-node-red/99292/3 "2025-10-21T11:11:13Z")

</div>

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