Q-input border color on focus
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?
This post is deleted!
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 />
Found the problem! Quasar styling is not friendly with Vue’s scoped styling. This works once scoped directive is removed from the style tag.
dobbel last edited by dobbel
Very nice simple solution. But… I have some questions about this css magic:
I understand the
But how did you know to target
And what is the logic/how did you know, to use the essential
:beforepseudo class selector to make it all work (
:afterworks too btw)?
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.
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.