Change border color when hover textfield

Question

I have vuetify textfield with 1.5.x version in my codepen: https://codepen.io/handy29/pen/yLLwjGg when you hover to text field I want to be green color #6fbd44. My code so far (css):

.theme--light.v-text-field--outline > .v-input__control > .v-input__slot {
    border-width: 1px;
  }

  .theme--light.v-text-field--outline > .v-input__control > .v-input__slot:hover {
    border-style: solid;
    border-color: #6fbd44;
  }

html:

<div id="app">
  <v-app id="inspire">
    <v-form>
      <v-container>
        <v-layout row wrap>

          <v-flex xs12 sm6 md3>
            <v-hover>
              <v-text-field
                outline
                single-line
            ></v-text-field>
            </v-hover>
          </v-flex>


        </v-layout>
      </v-container>
    </v-form>
  </v-app>
</div>

I am using :hover but it still not working, it stay black border color. What should I do? Thanks

Answer 1

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;

}