q-input color won't work correctly.

  • 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?

  • 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.

Log in to reply