Styling 'q-search' Component

  • I have the following q-search component within a q-toolbar component:

    <q-search inverted color="white" v-model="search" />

    I’m trying to figure out how to make the background color: white and the text-color $primary.

    I’m also trying to figure out how to remove the margin from the q-search component.

    I’ve tried many different styling combinations with no success.

    Any help is greatly appreciated 🙂

  • try this

    <q-search inverted color="primary" class="bg-white no-margin" v-model="search" />

    Unsure if no-margin will get you what you want. If not, look at the classes in devtools, and add scoped css

  • Thanks for the response 🙂

    As for the margin, it turned out to be the padding on q-toolbar. I just set it to 0 which works.

    For the search-bar, I can get the white background, but then it’s white text on white background…currently I’m unable to get white background with blue text…

Log in to reply

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.