样式选择下拉框 [英] Styling Select Drop down box
本文介绍了样式选择下拉框的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个HTML Select下拉框,该框已设置样式,我遇到的问题是我似乎无法设置选项的背景颜色.下面是一个演示的链接,您可以看到下拉选项具有白色背景,我正在尝试更改该背景.
I have a HTML Select drop down box, which I have styled, the problem I am having is that I can not seem to style the background color of the options. Below is a link to a demo as you can see the drop down options has a white background, which i am trying to change.
http://cssdeck.com/labs/lnroxrua
这是我的HTML代码:
Here is my HTML Code:
<div class="select-div">
<select name="pagination">
<option value="10" selected="selected">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
</select>
</div>
CSS样式
select{
background:transparent;
width: 170px;
padding: 2px;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:600;
color:#fff;
line-height: 1;
border: 0;
border-radius: 0;
height: 22px;
-webkit-appearance: none;
}
.select-div{
width: 170px;
height: 22px;
overflow: hidden;
background: url(arrowhead.png) no-repeat right #363636;
border-top:#575757 1px solid;
-webkit-border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
-webkit-box-shadow: inset 0 2px 4px rgba(107, 105, 105, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 0px 8px 3px -9px #000000;
-webkit-box-shadow: 0px 8px 3px -9px #000000;
box-shadow: 0px 8px 3px -9px #000000;
}
谢谢
推荐答案
这是一个 DEMO .
只需添加以下CSS规则:
Just add this CSS rule:
select > option {
background: color;
}
例如:
select > option {
background: pink; /* Or an hexadecimal value */
}
干杯,狮子座!
这篇关于样式选择下拉框的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文