Question

<v-text-field
    placeholder="Enter the name of the city"
    append-icon="search"
    autofocus
    clearable
    color="secondary lighten-4"
    :rules="inputRules"
  ></v-text-field>


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

}

以上，我将示例输入粘贴到Vuetify中。我的问题是，当inputRules === false从默认的红色更改为其他颜色时，如何在状态下设置Input by的样式。我要求的是最简单的方法。是否可以选择不使用非常特定的CSS选择器或标志来做到这一点！重要？

非常感谢您提供所有提示

Answer 1

<v-text-field
    placeholder="Enter the name of the city"
    append-icon="search"
    autofocus
    clearable
    color="secondary lighten-4"
    :rules="inputRules"
    class="form-input"
></v-text-field>


<style>
.form-input >>> .v-input__slot::after {
  border-color: rgba(255, 255, 255, 0.7) !important;
}

.form-input >>> .v-input__slot::before {
  border-color: rgba(255, 255, 255, 0.7) !important;
}
.form-input >>> .error--text {
  color: rgba(255, 255, 255, 0.7) !important;
}
.form-input >>> input {
  caret-color: white !important;
}
</style>

Answer 2

使用Vuetify，您可以检查要控制的元素以找到其类，然后将该类添加到样式中。

Demo

在这种情况下，我检查了错误文本并找到了该类并进行了更改：

$from    = 'admin@bla.com';
$headers = 'From: ' . $from . "\r\n" . 'Reply-To: ' . $from . "\r\n" . 'X-Mailer: PHP/' . phpversion() . "\r\n" . 'MIME-Version: 1.0' . "\r\n" . 'Content-Type: text/html; charset=UTF-8' . "\r\n";
$message = file_get_contents('cancelemail.php'); //Includes my HTML Page

Vuetify，如何在输入中的错误状态下更改颜色

2 个答案: