Quasar: "Adding your own colors" to q-input does not work

[joerg-walter-de]

http://quasar-framework.org/components/color-palette.html

quasar 0.15.12

.text-brand { color: #a2aa33; } .bg-brand { background: #a2aa33; }

and

<q-input color="brand" ... />

does not affect a q-input field in the expected way:

the text is not blue (what I actually want) but the field line is blue.

How do I modify the color of the text in the input field?

[rstoenescu]

Hi, The color prop refers to the bottom bar, not the color of text. For that write your own CSS rule.

[aprixon01112017]

This should be changed for obvious reasons: 'text' refers to text, may it be the content or the placeholder.

Please give me a piece of code with such a CSS rule for q-input.

[rstoenescu]

Nothing needs changing because:

1. color prop for all components refers to the decorative color; in the case of QInput it's the bottom bar color
2. What does a component property has to do with the way a custom Quasar color is defined? The way it's being defined has nothing to do in common with the purpose of the color property.

Please ask on Discord or forum for the piece of CSS code requested. Otherwise use Chrome/Firefox dev tools to see what selector you need to target.

[aprixon01112017]

Use text- or bg- prefixes as class names to change the color of text or the color of the background.

from
http://quasar-framework.org/components/color-palette.html

So the prefixes text- and bg- are built into quasar. The color defined with text-brand is used for the line, not the line-brand color. Quasar forces me to name something what it is not, it forces me to name the line color the text color.

[rstoenescu]

You are totally dismissing point 2. I emphasize on "the purpose of a property".

[joerg-walter-de]

As far as I understand :

You have defined that the property color for a q-input influences its properties in some way.
You have defined that definitions .text-customname and .bg-customname are used in some way when property color="customname"
And it happens that the color defined in .text-customname is used for the line.

Let's assume I want to color the lines of my q-input fields blue. So I write:

<q-input v-model="credentials.userId" color="brand" placeholder="Your ...

What do I have to write in my style file to make that work?

Am I free to write something with the identifier line?

Because it certainly would be reasonable to name the color definition after the gui element I want to color.

If the answer to my last question is no than I am forced to name something in my code what it is not - I have to use the identifier text for a definition that is not used on text but on lines.

[mesqueeb]

I require to edit the text color of a q-input. Is it possible to add "text-color" as a new prop?
Or I could make a PR if you want?

[pknuth]

Also text-color prop should come together with placeholder-color.

[Manubi]

I have the same problem. No ideas how to fix this?