Q-Select can't change text color



  • Given this q-select:

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

    I get this:0_1540463149964_2018-10-25_13-25-30.png

    But using color="white" I thought I would get something like this:0_1540465320491_2018-10-25_14-00-09.png

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



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

    Scott



  • @s-molinari Yes Scott, you’re right that the select is in the toolbar. This is what happens with the dark prop
    0_1540469974689_2018-10-25_15-19-22.png

    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
    0_1540470054953_2018-10-25_15-20-49.png
    The grey down arrow still bugs me though



  • 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



  • 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;
    }
    


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



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



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



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



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



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

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

    Scott



  • Thanks @s-molinari.


Log in to reply