Блог

Главная - Вопросы по программированию - Vuetify:как изменить цвет границы, когда я фокусируюсь на v-текстовом поле?

Vuetify:как изменить цвет границы, когда я фокусируюсь на v-текстовом поле?

#vue.js #vuetify.js

Вопрос:

Мне нужно поместить метку внутри v-текстового поля. Есть ли способ добавить цвет на границу сверху, границу справа, границу слева, когда я нажимаю на текстовое поле v, чтобы граница выглядела так же, как граница внизу?

https://codepen.io/magooo/pen/KKaRVVa

 <v-app id="app">
    <v-content class="mt-3 mx-5">
       <v-text-field
         dense
         filled
         label="Text field 1"
         ></v-text-field>
    </v-content>
</v-app>

Комментарии:

1. Вы можете использовать выделенное текстовое поле.

Ответ №1:

Когда v-text-field получает фокус, он применяет .v-input--is-focused класс CSS, который можно использовать для стилизации .v-input-slot границы при фокусировке:

 .v-input--is-focused .v-input__slot {
  border: 2px solid #005fcc !important;
  border-bottom-color: rgba(0, 0, 0, 0.38) !important;
}

ДЕМОНСТРАЦИЯ

Метки: ,