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:
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?
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments