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
JavaScript
x
10
10
1
<q-select
2
ref="month"
3
input-style="zoom: 1.2; text-align: right;"
4
rounded outlined
5
clearable
6
class="text-h4"
7
v-model="oMonth"
8
:options="oMonths"
9
/>
10
What the output looks like months selection
Advertisement
Answer
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:
JavaScript
1
11
11
1
<q-select
2
ref="month"
3
input-style="zoom: 1.2; text-align: right;"
4
rounded outlined
5
clearable
6
class="text-h4"
7
popup-content-class="text-h6"
8
v-model="oMonth"
9
:options="oMonths"
10
/>
11