A custom value of standout property does not affect text color inside input field of q-input component

[kovrik4spa]

What happened?

Hello,

If you specify a style that changes the color of the text in the standout property of the q-input component, then it does not work for changing the color of the text inside the input field, as well as prepend/append icons. Only label text color changes when input focused.

When focusing, the color of text and icons becomes white on a light theme, and black on a dark theme.

See this example: https://codepen.io/kovrik4spa/pen/vYQxxjd?editors=1011

As you can see in the standout property, I specified the style text-red

<q-input clearable standout="bg-teal text-red" v-model="text" label="Custom standout" dense style="width: 300px">

When you start changing the text, the background will turn teal color, the label will turn red, but the color of the text in the input box and icons will be white or black, depending on the theme.

What did you expect to happen?

I expected that the colors of the text in the input field and icons would turn red

Reproduction URL

https://codepen.io/kovrik4spa/pen/vYQxxjd?editors=1011

How to reproduce?

1. Go to the provided reproduction link
2. Choose theme
3. Click on text field to focus and standout styles applied

Flavour

Quasar CLI with Webpack (@quasar/cli | @quasar/app-webpack)

Areas

Components (quasar), Style & Identity (quasar)

Platforms/Browsers

Chrome

Quasar info output

No response

Relevant log output

No response

Additional context

No response

[CatsJuice]

I've always have the same problem.

The problem is caused by QField.sass:

.q-field
    &--standout
        &.q-field--highlighted
          .q-field__native, .q-field__prefix, .q-field__suffix, .q-field__prepend, .q-field__append, .q-field__input
            color: #fff

The Input tag has a class of q-field__native, and the value of standout is bound to its parent element, so the text color overrides.

A possible solution would be to bind the standout value to control as well, but inserting the element in use-field.js via node.push(state.getControl() seems to only controled by getControl, which would result in duplicate handling of standout, and each component that use field needs to be handled separately.

[kovrik4spa]

It seems that for the same reason it is not possible to change the color of the input text and icons by default. The color is hard coded in sass. Why is there no global variable added for color here https://quasar.dev/style/sass-scss-variables#variables-list? is this planned in the future?

[fengjac]

Same problem. Any update?

[skmbr]

I'd love to see this sorted out too.

Currently I usually end up doing something like this to get the effect I want :(

<q-input
  [...]
  standout
  class="bg-black rounded-borders"
  input-class="text-white"
  [...]
/>

But that doesn't work if I'm using stacked labels or prefix or suffix etc. which I end up needing custom css for.

Adding dark causes other problems, like adding some sort of translucent white overlay to everything, and getting standout to look just how I want with a q-select can be even more challenging.

[jgv-Lisam]

I'd love it too. This is a serious problem. It is even more if you want to theme your app.