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

问题:

This question already has answers here:

How to style a select tag's option element? (5 answers)

Closed 2 years ago.

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>

See also my demo on JSFiddle.

Unfortunately, it works only on Firefox. Could it be that others browser don't support styling of <option> elements?

Browsers I tested on:

• Chrome: Version 27.0.1453.116 m
• IE: 10
• Firefox: 22.0

回答1:

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?

回答2:

It's doable but tricky.

Normal select-dropdown things won't accept styles. BUT. If there's a "size" parameter in the tag, almost any CSS will apply. Using this trick, 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).

So here's a minimal example to see the principle behind:
(you'll need jQuery for the clicking mechanism):

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

Here's the fiddle with some more (actually too much) styles:

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

(Again, it's stuffed with gradients and effects just to demonstrate the possibilities. I mean, duh, I'm not telling you to use radial gradient for goups plus hover-animated items! I have a heart!)

Notice how <optgroup> tags don't encapsulate the options belonging under them as they normally should; yes this is intentional, it's for the styling (The well-mannered way would be a lot less stylable). And yes they do work perfectly well this way.

回答3:

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/

回答4:

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;
}

回答5:

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

回答6:

try this

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

CSS add your code

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