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.

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.

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!

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 />

I did this on Azure by serving the Vue app as a Node/Express public folder, then create an endpoint on Express that returns the process.env object to the Vue application’s GET request. Worked like a charm.

Create an express project. Add interface/ to the root and then build your Vue app there. Set Express to serve interface/dist and your builds will be served by Express.

Deploy the express app to your web application.

I have only just started using Quasar on a project with specific UX requirements. For example, I need a blue outlined input on hover. Three days of hacking the CSS has not produced a solution.

My question is, will using standard HTML <input> rather than <q-input> break the Quasar build magic, or can I roll my own standard elements as needed?

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?