user1128331 user1128331 - 1 year ago 46
CSS Question

css style on select option

I make the style for select option dropdown list.
Is it possible that to make the font-size differently?
For example,

-- Select Country -- < size 7pt;


Georgia < size 13pt;

This is my dropdown list:

.select_join {
width: 170px;
height: 28px;
overflow: hidden;
background: url('') 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;
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;">
<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>

See also demo on JS Fiddle.

It works only on Firefox. Could be that browser not support?

Chrome: Version 27.0.1453.116 m

IE: 10

Firefox: 22.0

Answer Source

Add a CSS class to the <option> tag for example:

Looks like there's a bug in webkit browsers like Google Chrome and this solution doesn't work. Take a look at this: styling an option in a select with google chrome