A pure CSS3 styling solution (no JavaScript) described in the tip is applicable to HTML5 SELECT elements and ASP.NET DropDownList controls. Two sample implementations discussed below allow placing custom image or any Unicode character on the top of pulldown button, replacing the default downward arrow to the right, as shown in the following demo screenshot:
Fig.1: HTML5 SELECT elements w/advanced CSS3 style using custom image and Unicode char, sample screenshot
Click on the image to view the practical implementation of this CSS3 styling technique.
Background
Styling of SELECT HTML element and corresponding ASP.NET DropDownList control (rendered as aforementioned HTML SELECT) is quite important and, still, a non-trivial task. The main goal of this tip is to provide a pure CSS solution with balanced complexity, flexibility and aesthetics while preserving all functionality of the underlying Select element (in other words, to create a sort of “drop-in” replacement for the existing web page design that uses SELECT elements).
Using the Code
The listing below includes both HTML5 and CSS3 encapsulated in a single .htm file. It demonstrates two sample CSS3 styling techniques: the first one using custom image identified in background URL (in this sample, it points to the favicon.ico of webinfocentral.com; in actual project, it could be any image file accessible by url property) and a second one using Unicode character (25bc in label#lblSelect::after pseudo-element, which also displays a downward arrow with all CSS3 customization possible) on the top of pull-down button. The solution is also applicable to ASP.NET DropDownList control asp:DropDownList (use either id property or CssClass)
Listing 1. Advanced CSS applied to HTML5 Select element (includes custom image and Unicode char)
Copy Code<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ADVANCED CSS3 STYLING OF SELECT ELEMENT (DROP-DOWN)</title>
<style type="text/css">
/* SELECT W/IMAGE */
select#selectTravelCity
{
width : 14em;
height : 3.2em;
padding : 0.2em 0.4em 0.2em 0.4em;
vertical-align : middle;
border : 1px solid #e9e9e9;
-moz-border-radius : 0.2em;
-webkit-border-radius : 0.2em;
border-radius : 0.2em;
box-shadow : inset 0 0 3px #a0a0a0;
-webkit-appearance : none;
-moz-appearance : none;
appearance : none;
/* sample image from the webinfocentral.com */
background : url(http://webinfocentral.com/Images/favicon.ico) 95% / 10% no-repeat #fdfdfd;
font-family : Arial, Calibri, Tahoma, Verdana;
font-size : 1.1em;
color : #000099;
cursor : pointer;
}
select#selectTravelCity option
{
font-size : 1em;
padding : 0.2em 0.4em 0.2em 0.4em;
}
select#selectTravelCity option[selected]{ font-weight:bold}
select#selectTravelCity option:nth-child(even) { background-color:#f5f5f5; }
select#selectTravelCity:hover
{
color : #101010;
border : 1px solid #cdcdcd;
}
select#selectTravelCity:focus {box-shadow: 0 0 2px 1px #404040;}
/*SELECT W/DOWN-ARROW*/
select#selectPointOfInterest
{
width : 185pt;
height : 40pt;
line-height : 40pt;
padding-right : 20pt;
text-indent : 4pt;
text-align : left;
vertical-align : middle;
box-shadow : inset 0 0 3px #606060;
border : 1px solid #acacac;
-moz-border-radius : 6px;
-webkit-border-radius : 6px;
border-radius : 6px;
-webkit-appearance : none;
-moz-appearance : none;
appearance : none;
font-family : Arial, Calibri, Tahoma, Verdana;
font-size : 18pt;
font-weight : 500;
color : #000099;
cursor : pointer;
outline : none;
}
select#selectPointOfInterest option
{
padding : 4px 10px 4px 10px;
font-size : 11pt;
font-weight : normal;
}
select#selectPointOfInterest option[selected]{ font-weight:bold}
select#selectPointOfInterest option:nth-child(even) { background-color:#f5f5f5; }
select#selectPointOfInterest:hover {font-weight: 700;}
select#selectPointOfInterest:focus {box-shadow: inset 0 0 5px #000099; font-weight: 600;}
/*LABEL FOR SELECT*/
label#lblSelect{ position: relative; display: inline-block;}
/*DOWNWARD ARROW (25bc)*/
label#lblSelect::after
{
content : "25bc";
position : absolute;
top : 0;
right : 0;
bottom : 0;
width : 20pt;
line-height : 40pt;
vertical-align : middle;
text-align : center;
background : #000099;
color : #fefefe;
-moz-border-radius : 0 6px 6px 0;
-webkit-border-radius : 0 6px 6px 0;
border-radius : 0 6px 6px 0;
pointer-events : none;
}
</style>
</head>
<body>
<br />
<select id="selectTravelCity" title="Select Travel Destination">
<option>New York City</option>
<option>Washington DC</option>
<option>Los Angeles</option>
<option>Chicago</option>
<option>Houston</option>
<option>Philadelphia</option>
<option>Phoenix</option>
<option>San Antonio</option>
<option>San Diego</option>
<option>Dallas</option>
<option>San Jose</option>
<option>Austin</option>
</select>
<br />
<br />
<label id="lblSelect">
<select id="selectPointOfInterest" title="Select points of interest nearby">
<option>caffe</option>
<option>food beverage</option>
<option>restaurant</option>
<option>shopping</option>
<option>taxi limo</option>
<option>theatre</option>
<option>museum</option>
<option>computers</option>
</select>
</label>
</body>
</html>
Points of Interest
CSS3 pseudo-class ::after and pseudo-element :after
In a context of this particular CSS3 solution, pseudo element label#lblSelect::after and pseudo-class label#lblSelect:after can be used interchangebly. There is another example of CSS 3 pseudo-class use-case: ToggleButton on the top of CheckBox element, described in [1].
Browser compatibility
Unicode characters are not universally recognized by different web browsers. For example, Opera/Safari/Chrome all recognizes Unicode characters ↻ and ↺ (could be used as a Refresh icon), but do not recognize rather similar ⟳ and ⟲ characters. There is also a multiple compatibility issues with Internet Explorer: Internet Explorer is not fully compatible with HTML5/CSS# and should not be recommended for use in any web applications.
