<!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>
http://www.oschina.net/code/snippet_12_46548