Here the class and the example
<asp:DropDownList ID="dropDownListZenithYesNo"
CssClass="dropDownBox" runat="server"></asp:DropDownList>
And here the CSS class of that dropdownlist
.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);
}
And here how it looks nice when you not click to see elements
And this is how very bad it looks when you click to see elements
Testing with windows 7 firefox latest version
CSS CSS3 HTML dropdown list color style
Add the following css below your 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);
}
But test your page in multiple browsers because it may have different results. Infact i have different results.
You must be inheriting from a default style. I would suggest specifying the color for your options:
.dropDownBox option{
font-size:1.2em;
background-color:#FF0 !important;
display:block;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.