问题描述
我正在寻找适用于HTML <select>元素的样式解决方案，如下所述:
I am looking for styling solution to apply to HTML <select> element (i.e. web form drop-down) as described below:
- 纯HTML5/CSS3实现
- 不依赖Java脚本或其他脚本语言
- 跨浏览器兼容性(FF/Chrome/Safari/IE10)
目前，我正在使用以下CSS3代码段来设置<select>元素的样式:
Currently I'm using the following CSS3 snippet for styling <select> element:
select {
font-size:9pt;
letter-spacing:0.07em;
color:#808080;
background:transparent;
border: solid 1px #808080;
padding:3px;
cursor:pointer;
}
select option { padding: 1px 5px 1px 3px;}
select option[selected]{ color:#303030; }
select option:nth-child(even) { background-color:#e5e5e5; }
示例实现:> 此处
Sample implementation: here
我想了解其他可用的'纯CSS3'样式选项，这些样式选项适用于HTML <select>元素的内部按钮(带有向下的小三角形)，即背景，颜色，边框，字体属性等.
I would like to find out about other available 'pure CSS3' styling options to apply to the inner button (with that little downward triangle) of HTML <select> element, i.e., its background, color, border, font properties, etc.
推荐答案
到目前为止，存在两种与SELECT元素样式相关的CSS3解决方案，可提供足够水平的自定义和整体美感.下面的示例演示了这两种技术；为了简化/提高可读性，HTML5和CSS3部分被封装在一个HTML5文件中.
So far, two CSS3 solutions exist pertinent to styling SELECT element, providing adequate level of customization and overall aesthetics. The following sample demonstrates both techniques; for the sake of simplicity/readability HTML5 and CSS3 parts are encapsulated in a single HTML5 file.
第一个解决方案实现了放置在下拉按钮上的自定义图像；第二个使用Unicode字符(可以是任意字符).
The first solution implements custom image placed on the pull-down button; the second one utilizes Unicode characters (can be any).
<!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伪类的使用.在 此处 中提供了工作示例.
Both solutions are based on the use of CSS3 pseudo-classes. Working example is available here.
注意:Internet Explorer存在一些兼容性问题，但是IE将被弃用，因此不建议在以后的开发中使用它.
Note: there is some compatibility issue with Internet Explorer, but IE is going to be deprecated, thus it should not be recommended for any future dev.
这篇关于寻找HTML5< select>元素CSS3样式解决方案:无图像文件，跨浏览器兼容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！