Vuetify输入框错误状态颜色修改：无需复杂CSS的最简方案

刚好我之前也碰到过这个需求，Vuetify其实提供了原生的属性来搞定这件事，完全不用写复杂CSS或者加!important标记，一步就能实现。

你只需要给<v-text-field>添加**error-color**属性，指定你想要的颜色就可以了——这个属性是Vuetify专门为验证失败状态设计的，会自动替换边框、图标以及错误提示文本的默认红色样式。

修改后的完整代码示例 #

Template部分：

<v-text-field
  placeholder="Enter the name of the city"
  append-icon="search"
  autofocus
  clearable
  color="secondary lighten-4"
  :rules="inputRules"
  error-color="orange darken-2" <!-- 新增的属性 -->
></v-text-field>

Script部分：

data() {
  return {
    inputRules: [
      v => v.length >= 3 || "Type at least 3 characters"
    ]
  };
}

额外说明 #

• 颜色值可以用Vuetify预设的颜色体系，比如"purple"、"teal lighten-1"这类，和你用的color="secondary lighten-4"格式一致；
• 也支持自定义颜色值，比如十六进制error-color="#ff9800"或者RGBerror-color="rgb(255, 152, 0)"都没问题。

这个方法完全是官方推荐的原生实现方式，既简洁又不会有样式冲突的问题，刚好符合你的需求～

内容的提问来源于stack exchange，提问作者Ofc_