[Vuejs]-Change border color when hover textfield

by

3👍

✅

In vuetify textfield’s hover state has been covered with following selector which is more specific selector for your textfield. So that it blocked your css rule.

.theme--light.v-text-field--outline:not(.v-input--is-focused):not(.v-input--has-state)>.v-input__control>.v-input__slot:hover

In order to bypass the styling of vuetify for textfield hover you can use same selector in your css file.

.theme--light.v-text-field--outline:not(.v-input--is-focused):not(.v-input--has-state)>.v-input__control>.v-input__slot:hover{
border-width: 1px;
border-style: solid;
border-color: #6fbd44;

}

👤Ozan Batuhan Ceylan

Leave a comment