Блог

Главная - Вопросы по программированию - Vuetify, как изменить цвет при состоянии ошибки при вводе

Vuetify, как изменить цвет при состоянии ошибки при вводе

#validation #vue.js #input #vuetify.js

#валидация #vue.js #входные данные #vuetify.js #проверка #ввод

Вопрос:

 <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 по умолчанию меняется с красного на любой другой. Я прошу о самом простом из возможных способов. Есть ли возможность не делать этого с помощью очень специфических css-селекторов или флага!Важный?

Большое вам спасибо за все советы

Ответ №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>