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 {_x000D_
width: 170px;_x000D_
height: 28px;_x000D_
overflow: hidden;_x000D_
background: url('http://s24.postimg.org/lyhytocf5/dropdown.png') no-repeat right #FEFEFE;_x000D_
border: #FEFEFE 1px solid;_x000D_
-webkit-border-radius: 3px;_x000D_
border-radius: 3px;_x000D_
-webkit-box-shadow: inset 0px 0px 10px 1px #FEFEFE;_x000D_
box-shadow: inset 0px 0px 10px 1px #FEFEFE;_x000D_
}_x000D_
.select_join select {_x000D_
background: transparent;_x000D_
width: 170px;_x000D_
font-size:7pt;_x000D_
color:grey;_x000D_
border: 0;_x000D_
border-radius: 0;_x000D_
height: 28px;_x000D_
-webkit-appearance: none;_x000D_
}_x000D_
.select_join select:focus {_x000D_
outline: none;_x000D_
}
_x000D_
<div style="background-color:pink;height:150px; text-align:center;">_x000D_
<br/>_x000D_
<div class="select_join" style="margin-left:15px">_x000D_
<select name="txtCountry">_x000D_
<option>-- Select Country --</option>_x000D_
<option value="1">Georgia</option>_x000D_
<option value="2">Afghanistan</option>_x000D_
</select>_x000D_
</div>_x000D_
</div>
_x000D_
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:
This question is related to
css
html-select
font-size
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/
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;
}
select[value="value"]{
background-color: red;
padding: 3px;
font-weight:bold;
}
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).
<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>
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.
Source: Stackoverflow.com