css样式选择选项 [英] 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;
这是我的下拉列表:
.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>
a href =http://jsfiddle.net/VggvD/50/ =noreferrer> demo on JS Fiddle 。
See also demo on JS Fiddle.
它只能工作在Firefox上。可能是该浏览器不支持?
It works only on Firefox. Could be that browser not support?
Chrome:版本27.0.1453.116 m
Chrome: Version 27.0.1453.116 m
IE:10
Firefox:22.0
Firefox: 22.0
推荐答案
添加CSS 到
< option>
标签,例如: http://jsfiddle.net/Ahreu/
Add a CSS class
to the <option>
tag for example: http://jsfiddle.net/Ahreu/
看起来在 webkit中有一个错误
浏览器如 Google Chrome
,此解决方案不起作用。看看这个:样式中的选项样式在选择中添加一个选项google chrome
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
这篇关于css样式选择选项的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!