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…