Make select options larger in q-select quasar

user_5864227 0
Viewed 1637

I'm using q-select to display the months and the font size is quite small so I want to make the options larger. I tried changing the font-size in css but it didn't work.

My select atm

          <q-select
            ref="month"
            input-style="zoom: 1.2; text-align: right;"
            rounded outlined
            clearable
            class="text-h4" 
            v-model="oMonth" 
            :options="oMonths"
          />

What the output looks like months selection

quasar-framework font-size select javascript
1 Answers

The <q-select> attributes you need to affect the appearance of the popup menu and its option items are popup-content-class and/or popup-content-style. (You can also use the option slot if you need more control over the content of each item.)

Something along these lines would work, for h6-sized text:

          <q-select
            ref="month"
            input-style="zoom: 1.2; text-align: right;"
            rounded outlined
            clearable
            class="text-h4" 
            popup-content-class="text-h6"
            v-model="oMonth" 
            :options="oMonths"
          />
user_160621230
Related