How to change text color of ui.input() ?

[CrimsonGhost69]

Hello there,

i'd like to change the text color of an input field.

This is what i tried so far, but without success:

ui.input(label='IP:').style('color: #FFFFFF !important').props('outlined color=orange-4 label-color=white filled')

If i add e.g. a font-size style it will apply to my text but for a unknown reason the color isn't changing.

[falkoschindler]

That's strange. Quasar's color prop doesn't affect the input text, but only some kind of focus indicator:
https://quasar.dev/vue-components/input#coloring

And .style('color: #FFFFFF !important') does not work, because ui.input consists of multiple nested HTML elements and style only affects the outermost element.

But you can use the input-style prop to apply CSS to the input HTML element:

ui.input().props('input-style="color: red"')

[CrimsonGhost69]

Hi Falko,

thank you for your quick support and solution!