问问题
19507 次
2 回答
2
我曾在我的一个模块中使用过它。你可以试试这个：
select {
background-color:#91EB76;
width: 180px;
padding: 5px;
font-size: 16px;
border: 1px solid #ccc;
height: 34px;
}
调整颜色会为你做的工作[希望]
- 纯 HTML5/CSS3 实现
- 不依赖 Javascript 或其他脚本语言
- 跨浏览器兼容性（FF/Chrome/Safari/IE10）
于 2013-05-09T06:25:05.040 回答
-2
到目前为止，存在两个与样式 SELECT 元素相关的 CSS3 解决方案，提供足够的定制水平和整体美感。以下示例演示了这两种技术；为了简单/可读性，HTML5 和 CSS3 部分被封装在一个 HTML5 文件中。
第一个解决方案实现了放置在下拉按钮上的自定义图像；第二个使用 Unicode 字符（可以是任何字符）。
<!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>
两种解决方案都基于 CSS3 伪类的使用。工作示例可在此处获得。
注意：与 Internet Explorer 存在一些兼容性问题，但 IE 将被弃用，因此不建议任何未来的开发人员使用它。
于 2015-03-27T19:04:37.357 回答