q-input color won't work correctly.

[Ewa]

I have big problem with q-input. I need to gray border, that will be change to orange after click. But, if I add color=“secondary” to my q-input border is orange whole time, not only after focused.

Maybe this is because I have to use quasar plugin, maybe this is because I have custom colors in my quasar.variables, it’s hard to say. I would try to change it manually, but I even can’t find some class responsible for it. There is no something like

border: xpx solid secondary color hex or rgb

or something like that, then you defined my secondary color for border. So I even don’t know which class I should to overwritten. Maybe someone can help?

[Ewa]

Woohoo

I found answer. The problem was cause by giving input inside q-dialog. I solved it by overwritten classes:

.q-field–outlined .q-field__control {
border: 1px solid $primary !important //then is not focused keep gray (primary) color
}

.q-field–focused.q-field–outlined .q-field__control,
.q-field–focused.q-field–outlined .q-field__control:before {
border: none !important; //then is focused remove default border
}

and my q-input have color=“secondary”

So, for future, be carefully then you give your input inside dialog.