Styling search bar with select and button component

  • I am learning the Quasar Framework and web developement in general. I would like to have a search bar with a select component and button with search icon similar to search bar in desktop. The components are not uniformly integrated in a uniform search bar for me. This is the search bar I want to get:

    This is the search bar I got:

    Here is my code:

        <div class="row sm-gutter">
          <div class="bg-white">
            <q-select type="list" v-model="select" :options="selectOptions"></q-select>
          <div class="auto">
          <div class="auto">
            <button class="primary">
    // import { Utils, Platform } from 'quasar'
    export default {
      data () {
        return {
          select: 'fb',
          selectOptions: [
              label: 'Google',
              value: 'goog'
              label: 'Facebook',
              value: 'fb'
              label: 'Twitter',
              value: 'twtr'
              label: 'Apple Inc.',
              value: 'appl'
              label: 'Oracle',
              value: 'ora'
      methods: {}
    <style lang="styl">
       background rgba(147, 128, 108, .1)
       padding 10px
    Thank you

  • Hi David,

    Could you put your code in three backticks please? See the doc link below for reference.


  • Thank you Scott

Log in to reply