Q-Select can't change text color

  • Given this q-select:

                prefix="Language: "

    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.


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

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


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

Log in to reply