转载 -- CSS3 中关于 select 下拉列表的样式

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

截图效果：

aaarticlea/png;base64,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" alt="" />aaarticlea/png;base64,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" alt="" />aaarticlea/png;base64,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" alt="" />

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</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>