How can I change the font-size of a select option?

Question

I am trying to style a select option dropdown list. Is it possible to make the font-sizes of the options different from the default value? For example, the default:

-- Select Country --

Would be size 7pt; and one of the options,

Georgia

Would be size 13pt.

This is my dropdown list:

.select_join {
  width: 170px;
  height: 28px;
  overflow: hidden;
  background: url('http://s24.postimg.org/lyhytocf5/dropdown.png') no-repeat right #FEFEFE;
  border: #FEFEFE 1px solid;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: inset 0px 0px 10px 1px #FEFEFE;
  box-shadow: inset 0px 0px 10px 1px #FEFEFE;
}
.select_join select {
  background: transparent;
  width: 170px;
  font-size:7pt;
  color:grey;
  border: 0;
  border-radius: 0;
  height: 28px;
  -webkit-appearance: none;
}
.select_join select:focus {
  outline: none;
}

<div style="background-color:pink;height:150px; text-align:center;">
  <br/>
  <div class="select_join" style="margin-left:15px">
    <select name="txtCountry">
      <option>-- Select Country --</option>
      <option value="1">Georgia</option>
      <option value="2">Afghanistan</option>
    </select>
  </div>
</div>

We need a trick here...

Normal select-dropdown things won't accept styles. BUT. If there's a "size" parameter in the tag, almost any CSS will apply. With this in mind, I've created a fiddle that's practically equivalent to a normal select tag, plus the value can be edited manually like a ComboBox in visual languages (unless you put readonly in the input tag).

A simplified example:

<style>

    /* only these 2 lines are truly required */
    .stylish span {position:relative;}
    .stylish select {position:absolute;left:0px;display:none}

    /* now you can style the hell out of them */
    .stylish input    { ... }
    .stylish select   { ... }
    .stylish option   { ... }
    .stylish optgroup { ... }

</style>
...
<div class="stylish">
    <label> Choose your superhero: </label>
    <span>
        <input onclick="$(this).closest('div').find('select').slideToggle(110)">
        <br>
        <select size=15 onclick="$(this).hide().closest('div').find('input').val($(this).find('option:selected').text());">

            <optgroup label="Fantasy"></optgroup>
            <option value="gandalf">Gandalf</option>
            <option value="harry">Harry Potter</option>
            <option value="jon">Jon Snow</option>

            <optgroup label="Comics"></optgroup>
            <option value="tony">Tony Stark</option>
            <option value="steve">Steven Rogers</option>
            <option value="natasha">Natasha Romanova</option>

        </select>
    </span>
    <!--

        For the sake of simplicity, I used jQuery here.
        Today it's easy to do the same without it, now
        that we have querySelector(), closest(), etc.

    -->
</div>

A live example:

https://jsfiddle.net/7ac9us70/1052/

Note 1: Sorry for the gradients & all fancy stuff, no they're not necessary, yes I'm showing off, I know, hashtag onlyhuman, hashtag notproud.

Note 2: Those <optgroup> tags don't encapsulate the options belonging under them as they normally should; this is intentional. It's better for the styling (the well-mannered way would be a lot less stylable), and yes this is painless and works in every browser.

It doesn't have to be 15, what matters is that it has a size - that's what makes it render as a listbox, not a single-line field with a button. — dkellner, Jul 14 '16 at 06:27
Yeah, sorry, should've been clearer. What is it about the size attribute that makes it render as a listbox? Is this documented anywhere? Is it a CSS bug? (which means it might be fixed in the future and things relying on it would break). Is it only the size attribute, or will some other attribute (width or height etc) also work? (I can probably easily find out the answer to that last one myself by playing with the fiddle) — Jay, Jul 14 '16 at 06:52
No, it's a well-documented feature of SELECT and it will definitely not go away. I don't know why the guys implemented it like this - size means how high the list should be when it's shown but merely the presence of "size" makes it shown by default. See here: https://developer.mozilla.org/en/docs/Web/HTML/Element/select — dkellner, Jul 14 '16 at 07:03

score 16 · Accepted Answer · edited Nov 17 '17 at 10:06

16

Add a CSS class to the <option> tag to style it: http://jsfiddle.net/Ahreu/

Currently WebKit browsers don't support this behavior, as it's undefined by the spec. Take a look at this: How to style a select tag's option element?

edited Nov 17 '17 at 10:06

TylerH

20,799
66
75
101

answered Jul 02 '13 at 07:40

Atropo

12,231
6
49
62

1

Oh, it doesn't work on chrome right? – user1128331 Jul 02 '13 at 07:51
You're right, google chrome has a strange behaviour on this. Check my updated answer. – Atropo Jul 02 '13 at 08:05
It might not support for font-sizing :( – user1128331 Jul 02 '13 at 08:41
Yep, but your solution is work on firefox :) Thank you – user1128331 Jul 03 '13 at 02:56

score 4 · Answer 3 · answered Jul 02 '13 at 08:15

4

Tell the option element to be 13pt

select option{
    font-size: 13pt;
}

and then the first option element to be 7pt

select option:first-child {
    font-size: 7pt;
}

Running demo: http://jsfiddle.net/VggvD/1/

answered Jul 02 '13 at 08:15

Andrea Ligios

49,480
26
114
243

3

It doesn't work on Google Chrome – Atropo Jul 02 '13 at 08:49
You can't do it in Google Chrome (AFAIK) – Andrea Ligios Jul 02 '13 at 09:13
@Atropo I think it may not be a bug, but a wanted decision, probably to prevent users writing ugly stuff: let's think to an select with each element of a different height / font, it would be a nightmare... – Andrea Ligios Jul 02 '13 at 09:17

Falguni Panchal · Answer 4 · 2013-07-02T08:37:57.723

0

try this

http://jsfiddle.net/VggvD/2/

CSS add your code

.select_join option{
    font-size:13px;
}

edited Jul 02 '13 at 08:37

answered Jul 02 '13 at 07:56

Falguni Panchal

8,873
3
27
33

Your fiddle shows that this does not work... – Ben Racicot Jan 14 '15 at 20:53
thanks, it's working :) – user3k Jun 13 '20 at 15:52

score 0 · Answer 5 · answered Jul 02 '13 at 10:29

0

check this fiddle,

i just edited the above fiddle, its working

http://jsfiddle.net/narensrinivasans/FpNxn/1/

.selectDefault, .selectDiv option
{
    font-family:arial;
    font-size:12px;
}

answered Jul 02 '13 at 10:29

Naren Srinivasan S

350
3
7

1

please explain also this answer. – Sergio Jul 02 '13 at 10:54

score 0 · Answer 6 · answered Feb 13 '18 at 14:17

0

select[value="value"]{
   background-color: red;
   padding: 3px;
   font-weight:bold;
}

answered Feb 13 '18 at 14:17

Benito Esteban

1
1

3

please add some description to your answer why the OP should use this and what is the problem in the OP code – Muhammad Omer Aslam Feb 13 '18 at 21:39

How can I change the font-size of a select option?

6 Answers6

We need a trick here...

A simplified example:

A live example:

Linked

Related