我正在尝试设置选择选项下拉列表的样式。是否可以使选项的字体大小与默认值不同?
例如,默认:
-- Select Country --
尺寸为 7pt;和选项之一,
Georgia
尺寸为 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>
另请参阅我的JSFiddle 上的演示 http://jsfiddle.net/VggvD/50/.
不幸的是,它仅适用于 Firefox。难道是其他浏览器不支持样式<option>
元素?
我测试过的浏览器:
- Chrome:版本 27.0.1453.116 m
- IE: 10
- 火狐:22.0
我们这里需要一个技巧...
普通的选择下拉菜单不接受样式。但。如果标签中有“size”参数,则几乎所有 CSS 都适用。考虑到这一点,我创建了一个实际上相当于普通选择标签的小提琴,而且可以像视觉语言中的组合框一样手动编辑该值(除非您将readonly在输入标签中)。
一个简化的例子:
<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/ https://jsfiddle.net/7ac9us70/1052/
注1:对渐变和所有花哨的东西感到抱歉,不,它们不是必需的,是的,我在炫耀,我知道,标签只有人类,标签不自豪。
注2:那些<optgroup>
标签没有像通常那样封装属于它们的选项;这是故意的。这对于样式来说更好(礼貌的方式会少很多样式),是的,这很轻松并且适用于每个浏览器。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)