Q-input border color on focus

[bkirvin]

I have been hacking for 3 days trying to set the q-input outlined border color on focus. I successfully accessed the border color, but then the hover changed it to black. I can’t find any hover styling in the inspector. Anyone managed this?

[turigeza]

@bkirvin
Try this and see pen.

.q-field--outlined:hover .q-field__control:before {
  border-color: red;
}

https://codepen.io/turigeza/pen/QWEVNEy

[bkirvin]

This post is deleted!

[bkirvin]

Thank you for answering!
I see that the fiddle works, but I still get the black outline on hover in my component. I am using Quasar pkg 1.14.2. Differences I see is that my q-input is inside a q-form, if that matters and I am using more props.

<q-input
    @focus="resetValid('username')"
    dense
    standout
    placeholder="Enter username"
    type="text"
    ref="username"
    outlined
    no-error-icon
    v-model: "user.email"
    :rules="[
        val => !!val || '* Required',
        val => isValidEmail(val) || 'invalid email'
    ]"
    lazy rules />

[bkirvin]

Found the problem! Quasar styling is not friendly with Vue’s scoped styling. This works once scoped directive is removed from the style tag.

Thanks again!

[dobbel]

@turigeza

Very nice simple solution. But… I have some questions about this css magic:

I understand the .q-field--outlined:hover part.

But how did you know to target .q-field__control ?

And what is the logic/how did you know, to use the essential :before pseudo class selector to make it all work ( :after works too btw)?

[bkirvin]

If you inspect the ::before in Chrome inspector, you will see a CSS rule for ‘.q-field–outlined .q-field__control:before’ that is styling the q-input.

[turigeza]

@dobbel Just as @bkirvin said above.

I use Chrome inspector to find what style apply to the element.

I click on the divs in the source tab and look at the computed styles. I start on the outmost div and work my way in. As I click on the divs I am observing the computed styles and looking for “borders” or “outline” styling.

If I can not locate where they come from I start looking at the after and before elements too.

Once I located the styling I open it and copy paste the exact css which is targeting the element and use that to add my own style.

Oh and sometimes it helps if you force element state like in the case of hover you can not hover the object and navigate the source code at the same time.