1. [图片] Styling_SELECT.jpg
2. [代码]test.html
<!
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
>