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