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

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

• javascript
• select
• font-size
• quasar-framework

Share Improve this question Follow asked May 21, 2021 at 9:44 renaise21renaise21 27133 silver badges1313 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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"
          />