Advanced CSS3 Styling of HTML5 SELECT Element
纯 CSS3 样式解决方案，适用于 HTML5 SELECT 元素和 ASP.NET DropDownList 控件
引言
本文介绍的纯 CSS3 样式解决方案（无 JavaScript）适用于 HTML5 SELECT 元素和 ASP.NET DropDownList 控件。下面讨论的两个示例实现允许在下拉按钮的顶部放置自定义图像或 Unicode 字符，替换默认的向下箭头（单选模式），如以下演示截图所示
图1：使用自定义图像和 Unicode 字符的高级 CSS3 样式的 HTML5 SELECT 元素，示例截图
点击图片查看此 CSS3 样式技术的实际实现。
背景
编程关注点分离
编程关注点分离 [1] 是现代软件开发范例，同样适用于桌面、移动/Web 应用程序。为了遵守这一范例以及与 Web 设计/开发最佳实践相关，HTML 应该用于页面内容，CSS 用于表示（样式），脚本语言（JavaScript、jQuery 等）主要用于应用程序与用户的交互。在某些情况下，这些领域可能会重叠：例如，JavaScript 可以用于 HTML 基本元素的样式。通过 JavaScript 进行的这种样式技术应被视为例外而不是规则，一种临时的修复。此外，JavaScript（或任何脚本）可能会在用户计算机上被禁用，导致这种技术完全失效。任何具有前瞻性的 Web 设计/开发都应在最大程度上遵守编程关注点分离的基本概念。简单来说，样式必须由 CSS 完成；JavaScript 应该用于交互和行为逻辑。
HTML5 SELECT 元素样式
SELECT HTML 元素以及相应的 ASP.NET DropDownList 控件（渲染为上述 HTML SELECT）的样式设计非常重要，而且仍然是一项不简单的任务。本文的主要目标是提供一个纯 CSS 解决方案，该方案具有平衡的复杂性、灵活性和美观性，同时保留了底层 Select 元素的所有功能（换句话说，为使用 SELECT 元素的现有网页设计创建一种“即插即用”的替代方案）。
Using the Code
以下列表包含封装在单个 .htm 文件中的 HTML5 和 CSS3。它演示了两种 CSS3 样式技术：第一种使用在背景 URL 中标识的自定义图像（在此示例中，它指向 webinfocentral.com 的 favicon.ico；在实际项目中，它可以是任何可通过 url 属性访问的图像文件），第二种使用 Unicode 字符（在 label#lblSelect::after 伪元素中的 \25bc，它也显示一个向下箭头，并支持所有可能的 CSS3 自定义）在下拉按钮的顶部。该解决方案也适用于 ASP.NET DropDownList 控件 asp:DropDownList（使用 id 属性或 CssClass）。
清单 1 中的以下示例代码片段演示了 CSS3 样式技术，允许在下拉按钮上放置任何 Unicode 字符，以及其他美学增强。
带有 Unicode 字符的 HTML5 Select 元素
清单 1. 高级 CSS：下拉按钮上带有 Unicode 字符的 HTML5 Select 元素
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ADVANCED CSS3 | SELECT ELEMENT WITH UNICODE BUTTON SYMBOL</title>
<meta name="Description" content="Drop-down control with Unicode symbol placed on pull-button and other CSS3 styling technique" />
<style type="text/css">
/*SELECT ELEMENT WITH UNICODE SYMBOL: 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; /*IMPORTANT*/
font-family : Arial, Calibri, Tahoma, Verdana;
font-size : 18pt;
font-weight : 500;
color : #000099;
cursor : pointer;
outline : none;
}
select#selectPointOfInterest::-ms-expand {display: none;} /*FOR IE*/
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 />
<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>
清单 2 中显示的以下示例代码片段演示了用于在下拉按钮上放置图像图标的 CSS3 样式技术，以及其他美学增强。
带有图像按钮的 HTML5 Select 元素
清单 2. 高级 CSS：带有图像按钮的 HTML5 Select 元素
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ADVANCED CSS3 | SELECT ELEMENT WITH IMAGE BUTTON</title>
<meta name="Description" content="Drop-down control with image placed on pull-button and other CSS3 styling technique" />
<style type="text/css">
/* SELECT ELEMENT WITH GRAPHIC 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; /*IMPORTANT*/
/* sample ICO image at 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#select#selectTravelCity::-ms-expand {display: none;} /*FOR IE*/
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;}
</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>
</body>
</html>
关注点
CSS3 伪类 ::after 和伪元素 :after
在此特定的 CSS3 解决方案中，伪元素 label#lblSelect::after 和 伪类 label#lblSelect:after 可以互换使用。
浏览器兼容性
Unicode 字符 [4] 并非所有网页浏览器都能普遍识别。例如，Opera/Safari/Chrome 都识别 Unicode 字符 ↻ 和 ↺（可用作“刷新”图标），但无法识别相当相似的带间隙的圆形箭头 ⟳(U+27F3) 和 ⟲ (U+27F2) 字符；Unicode 字符 U+2615（“热饮”）也是如此——它不被 IE/基于 Webkit 的浏览器识别（或者，除了“热饮”字形，您可以使用 U+1F375（“无把手茶杯”），它在除了 Opera 之外的所有主流浏览器中都能正确渲染）。一般来说，强烈建议在所有感兴趣的网页浏览器中测试 Unicode 解决方案，以适应特定的用例。
另外，请注意 appearance:none; 属性，它对于此解决方案正常工作至关重要。此属性事实上被所有主流网络浏览器支持，除了 IE（更多信息请参阅评论线程中提及的参考 [2]）。最新的 IE11 版本与此解决方案大部分兼容：请参阅“修复和改进”子章节中的修复（另外，关于在任何前瞻性网络应用程序中使用 IE：IE 很可能很快被淘汰 [4]，或者将以不同品牌出现 [5]，希望能像其他主流浏览器一样与高级 HTML5/CSS3 兼容）。IE 的实际使用份额相对较小且持续萎缩：根据 [3]，Google Chrome/Android 浏览器占据了约 50% 的最大份额，Firefox 占 12%，Safari 占 14%，Opera 占 4%（所有这些浏览器大部分都与该解决方案兼容）；IE 的份额估计为 13%。以下示例截图反映了在各种网络浏览器中运行实际解决方案的测试结果。
测试设置与结果
在以下网络浏览器中进行了部分测试
- Firefox v.37+
- Chrome v.42+
- Opera v.28+
- Safari v.5+ (适用于 Windows)
- IE11
以下是示例截图（点击图片查看在实际 Web 应用程序中以单选模式运行的完全可操作的 HTML5/CSS3 Select 控件）。
|
Firefox v.37+ | |
|
Chrome v.42+ | |
|
Opera v.28 | |
 |  |
|
IE11 (修复前) |
IE11 (应用修复后) |
图 2a. 下拉按钮上带有 Unicode 字符的 Select 元素
|
Firefox v.37+ | |
Chrome v.42 | |
Opera v.28 | |
 | IE11 (修复前) |
 | IE11 (应用修复后) |
图 2b. 带有图像按钮的 Select 元素
用例
对于移动和对互联网流量敏感的实时 Web 应用程序而言，清单 1 中描述的 SELECT 元素的 Unicode CSS3 样式将被视为首选解决方案。它不需要任何图形图像文件：下拉按钮上的字形仅包含一个 Unicode 字符（即上述示例中的 '\25bc'；U+25BD 白向下三角形和 U+2304 向下箭头也很有用），这在以下子章节中演示了如何轻松更改。如果找不到任何适用的 Unicode 字符，则可以使用第二种解决方案（清单 2），它使用图形图像文件，但这可能会由于图形图像文件相对较大的尺寸而增加 Web 流量。
更多示例
下面列出了更多使用 SELECT 下拉按钮上各种 Unicode 字符 [6] 的 CSS3 样式示例。此外，清单 3 中的代码片段使用了 'em' 相对单位（而不是前面示例中显示的 'pt'）。
清单 3. SELECT 元素下拉按钮上的各种 Unicode 字符
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ADVANCED CSS3 | SELECT ELEMENT WITH UNICODE CHAR ON PULL-BUTTON SYMBOL</title>
<meta name="Description" content="Drop-down control with various Unicode symbols placed on pull-button and other CSS3 styling technique using 'em' unit" />
<style type="text/css">
select
{
width : 12em;
height : 3em;
line-height : 3em;
vertical-align : middle;
padding-right : 2.5em;
text-indent : 0.2em;
text-align : left;
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; /*IMPORTANT*/
font-family : Arial, Calibri, Tahoma, Verdana;
font-size : 1.5em;
font-weight : 500;
color : #000099;
cursor : pointer;
outline : none;
}
select::-ms-expand {display: none;} /*FOR IE*/
select option
{
padding : 0.3em;
font-size : 1em;
font-weight : normal;
}
select option[selected]{ font-weight:bold}
select option:nth-child(even) { background-color:#f5f5f5; }
select:hover {font-weight: 700;}
select:focus {box-shadow: inset 0 0 5px #000099; font-weight: 600;}
/*LABEL FOR SELECT*/
label { position: relative; display: inline-block;}
label::after
{
/*'AIRPLANE' GLYPGH on PULL-DOWN BUTTON (U+2708)*/
content : "\2708";
position : absolute;
top : 0;
right : 0;
bottom : 0;
width : 2.5em;
line-height : 3em;
vertical-align : middle;
text-align : center;
background : #000099;
color : #fefefe;
font-size : 1.5em;
font-weight : 500;
-moz-border-radius : 0 6px 6px 0;
-webkit-border-radius : 0 6px 6px 0;
border-radius : 0 6px 6px 0;
pointer-events : none;
}
/*'ENVELOPE' GLYPGH on PULL-DOWN BUTTON (U+2709)*/
#envelope label::after { content: "\2709"; }
/*'SINGLE BAR NOTE' GLYPH ON PULL-DOWN BUTTON (U+266B)*/
#music label::after { content: "\266b"; }
</style>
</head>
<body>
<br />
<div>
<label>
<select title="TICKETS">
<option>New York City</option>
<option>Washington DC</option>
<option selected>Los Angeles</option>
<option>Chicago</option>
<option>Houston</option>
<option>Philadelphia</option>
</select>
</label> (U+2708)
</div>
<br />
<div id="envelope">
<label>
<select title="MAILING OPTIONS">
<option>USPS</option>
<option selected>UPS</option>
<option>FedEx</option>
<option>DHL</option>
</select>
</label> (U+2709)
</div>
<br />
<div id="music">
<label>
<select title="MUSIC">
<option>classical</option>
<option selected>rock/pop</option>
<option>jazz</option>
<option>country/folk</option>
</select>
</label> (U+266B)
</div>
</body>
</html>
与上述列表对应的示例如下
图 3：带有各种 Unicode 字符的 SELECT 元素示例截图
灵活性
为了更改下拉按钮上的字形，只需将 select 元素封装在 <div> 中，例如 <div id="envelope">，然后将相应的行添加到 CSS 样式表中：
<code>#envelope label::after { content: "\2709"; }</code>
如示例（清单 3）所示。
修复和改进
IE 兼容性修复：正如我们的 CPian 同事 Joe-Gakenheimer (jgakenhe) 建议的那样，在 CSS 样式表中添加以下一行将部分修复 IE 兼容性问题，使下拉按钮看起来正常（感谢 jgakenhe）
select::-ms-expand {display: none;}
IE 用户其他注意事项
关于 IE11 之前的版本，您可能已经看过如下所示的 meta 语句
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
这在某些情况下可能有所帮助：您可以在 MSDN 文章 [6,7] 中找到更多关于此主题的信息。
HTML5/CSS3 高级技术的其他示例
还有一些高级 CSS3 伪类用例的示例：CheckBox 元素顶部的 ToggleButton [8]，以及使用 <div> 元素创建紧凑灵活的伪图形 [9] 的示例。
历史
- 2015年3月24日：发布原始版本
- 2015年4月23日：发布扩展版本，包含主要代码/图形和文本更新。
- 2015年4月25日：IE 修复讨论/应用
- 2015年4月25日：添加了更多使用各种 Unicode 字符作为按钮字形的示例