![](/img/trans.png)
[英]Changing the background color of an ASP DropDownList using only CSS
[英]How to change asp:DropDownList extended background color ? CSS class
这里是班级和例子
<asp:DropDownList ID="dropDownListZenithYesNo"
CssClass="dropDownBox" runat="server"></asp:DropDownList>
这是该下拉列表的CSS类
.dropDownBox
{
font-size: 13px;
color: #3b3b3b;
padding: 5px;
background: -moz-linear-gradient(
top,
#f0f0f0 0%,
#d6d6d6);
background: -webkit-gradient(
linear, left top, left bottom,
from(#f0f0f0),
to(#d6d6d6));
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: 1px solid #999999;
-moz-box-shadow: 0px 1px 2px rgba(000,000,000,0.5), inset 0px 1px 0px rgba(255,255,255,1);
-webkit-box-shadow: 0px 1px 2px rgba(000,000,000,0.5), inset 0px 1px 0px rgba(255,255,255,1);
box-shadow: 0px 1px 2px rgba(000,000,000,0.5), inset 0px 1px 0px rgba(255,255,255,1);
text-shadow: 0px 1px 0px rgba(255,255,255,1), 0px 1px 0px rgba(255,255,255,0);
}
在这里,当您不单击查看元素时它看起来很好
这就是您单击以查看元素时看起来非常糟糕
使用Windows 7 Firefox最新版本进行测试
CSS CSS3 HTML下拉列表颜色样式
在您的CSS下方添加以下CSS
.dropDownBox option
{
font-size: 13px;
color: #3b3b3b;
padding: 5px;
background: -moz-linear-gradient(
top,
#f0f0f0 0%,
#d6d6d6);
background: -webkit-gradient(
linear, left top, left bottom,
from(#f0f0f0),
to(#d6d6d6));
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: 1px solid #999999;
-moz-box-shadow: 0px 1px 2px rgba(000,000,000,0.5), inset 0px 1px 0px rgba(255,255,255,1);
-webkit-box-shadow: 0px 1px 2px rgba(000,000,000,0.5), inset 0px 1px 0px rgba(255,255,255,1);
box-shadow: 0px 1px 2px rgba(000,000,000,0.5), inset 0px 1px 0px rgba(255,255,255,1);
text-shadow: 0px 1px 0px rgba(255,255,255,1), 0px 1px 0px rgba(255,255,255,0);
}
但是,在多个浏览器中测试您的页面可能会导致不同的结果。 实际上我有不同的结果。
您必须从默认样式继承。 我建议为您的选项指定颜色:
.dropDownBox option{
font-size:1.2em;
background-color:#FF0 !important;
display:block;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.