Q-Select can't change text color

reath

Given this q-select:

    <q-select
            :options="languages"
            v-model="lang"
            prefix="Language: "
            color="white"
    />

I get this:

But using color="white" I thought I would get something like this:

How can I color the pointed elements white? The prefix, the option text, the pointed down arrow, and the underline?

s.molinari

Looks like you have that select in the toolbar? On a whim, try the dark prop and see what happens.

Scott

reath

@s-molinari Yes Scott, you’re right that the select is in the toolbar. This is what happens with the dark prop

Almost, but I don’t like the darkened background when selecting an option. If there’s no other option I guess I’ll hide the prefix and leave it like this

The grey down arrow still bugs me though

s.molinari

You can add this to the CSS section of the component:

.q-if-control {
  color: white !important;
}

Just remember all selects down arrows in that component will be colored white.

Scott

Hawkeye64

Or, if you want to be specific, give your element an id (id="my-dropdown"), then you can do this:

#my-dropdown .q-if-control {
  color: white !important;
}

rubs

I have the same problem. Although CSS always works, I still believe color=“white” should change the text color. Using dark looks nice at first but the drop-down color changes as well.

rubs

So… Seems I found out what’s happening. Looks like some unintended CSS behavior. In the Quasar CSS, the selector:

.text-white {
  color: #fff !important;
}

is being overriden by:

.q-field__native, .q-field__prefix, .q-field__suffix, .q-field__input {
  color: rgba(0, 0, 0, 0.87);
}

Why this is happening is beyond me. For some reason !important is not working.

metalsadman

@rubs said in Q-Select can't change text color:

I still believe color=“white” should change the text color.

If you haven’t noticed by now or haven’t seen or read the docs about color props, color prop is for the component’s color theme.

color 
Type: String
Description: Color name for component from the Quasar Color Palette

what you need when using q-select, if using use-input prop you can use input-class="text-[color name from color palette] or use input-style="color: green" if not then override the css using your own class targetting q-field__native. in action https://codepen.io/metalsadman/pen/oNgJRdE.

p.s. Please next time make a new post instead of resurrecting a year old one. this old thread was still using pre version 1 of quasar making the previous solutions posted on this thread outdated. thx.

rubs

p.s. Please next time make a new post instead of resurrecting a year old one. this old thread was still using pre version 1 of quasar making the previous solutions posted on this thread outdated. thx.

Oops. Thanks for the heads up. I’ll be trying your solution, thanks again!

AlexSantanna

If we use <style scoped> this solution https://codepen.io/metalsadman/pen/oNgJRdE does not work. Any option besides removing scoped option?

s.molinari

If you use scoped styles, you need to use deep selectors “>>>”.

https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors

Scott

AlexSantanna

Thanks @s-molinari.

No More Posting New Topics!

Q-Select can't change text color