2.7 UI元素状态伪类选择器
UI元素状态伪类选择器也是CSS3选择器模块组中的一部分，主要用于form表单元素上，以提高网页的人机交互、操作逻辑以及页面的整体美观，使表单页面更具个性与品位，而且使用户操作页面表单更便利和简单。
2.7.1 UI元素状态伪类选择器语法
UI元素的状态一般包括：启用、禁用、选中、未选中、获得焦点、失去焦点、锁定和待机等。在HTML元素中有可用和不可用状态，例如表单中的文本输入框；HTML元素中还有选中和未选中状态，例如表单中的复选按钮和单选按钮。这几种状态都是CSS3选择器中常用的状态伪类选择器，详细说明如表2-11所示。
表2-11 UI元素状态伪选择器语法
选择器 类型 功能描述
E:checked 选中状态伪类选择器 匹配选中的复选按钮或单选按钮表单元素
E:enabled 启用状态伪类选择器 匹配所有启用的表单元素
E:disabled 不可用状态伪类选择器 匹配所有禁用的表单元素
2.7.2 浏览器兼容性
浏览器兼容性如表2-12所示。
除了IE浏览器外，各主流浏览器对UI元素状态选择器的支持都非常好，但IE 9也开始全面支持这些UI元素状态伪类选择器（如表2-12所示）。因此，考虑到IE 6～8是国内用户数最多的浏览器，使用UI元素状态伪类选择器需使用特别的方法来处理。
例如使用JavaScript库，选用内置已兼容了UI元素状态伪类选择器的JavaScript库或框架，然后在代码中引入它们并完成想要的效果。由Keith Clark编写的Selectivizr脚本是一个不错的选择。先将该脚本直接引入到页面中，再从7个JavaScript库中选择一个引入，UI元素状态伪类选择器就能够在IE上工作了。
除了使用JavaScript库外，还有一个比较原始而古老的做法，就是在不支持UI元素状态伪类选择器的IE浏览器下使用类名来处理。例如禁用的按钮效果，可以先在HTML标签中添加一个类名“disabled”，就可以在样式中添加样式。
.btn.disabled,/*等效于.btn:disabled,用于兼容IE低版本浏览器*/
.btn:disabled {
…
}
2.7.3 实战体验：Bootstrap的表单元素UI状态
UI元素状态伪类选择器目前主要针对应用在表单元素上，让表单更可用、易用和好用，同时让表单设计更漂亮。这里介绍Twitter的表单元素状态是如何来控制的。
Bootstrap中部分表单元素状态的效果如图2-20所示。
图2-20 Bootstrap表单元素状态部分效果
图中展示了表单元素中常用的几种UI状态效果，接着来看其实现代码。
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*表单基本样式，请查看对应示例代码*/
/*表单元素获得焦点效果*/
textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus{
border-color: rgba(82, 168, 236, 0.8);
outline: 0;
outline: thin dotted \9;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
0 0 8px rgba(82, 168, 236, 0.6);
}
/*表单中下拉选择框、文件控件、单选按钮、复选按钮得到焦点时效果*/
select:focus,
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
outline: thin dotted #333;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
/*禁用的input、select、textarea表单元素效果*/
input[disabled], /*等效于input:disabled*/
select[disabled], /*等效于select:disabled*/
textarea[disabled]/*等效于textarea:disabled*/
{
cursor: not-allowed;
background-color: #eeeeee;
border-color: #ddd;
}
/*禁用的单选按钮和复选按钮效果*/
input[type="radio"][disabled], /*等效于input[type="radio"]:disabled*/
input[type="checkbox"][disabled] /*等效于input[type="checkbox"]:disabled*/
{
background-color: transparent;
}
.control-group.warning > label,
.control-group.warning .help-block,
.control-group.warning .help-inline {
color: #c09853;
}
/*表单警告状态下效果*/
.control-group.warning .checkbox,
.control-group.warning .radio,
.control-group.warning input,
.control-group.warning select,
.control-group.warning textarea {
color: #c09853;
border-color: #c09853;
}
/*表单警告状态下并获得焦点下效果*/
.control-group.warning .checkbox:focus,
.control-group.warning .radio:focus,
.control-group.warning input:focus,
.control-group.warning select:focus,
.control-group.warning textarea:focus {
border-color: #a47e3c;
box-shadow: 0 0 6px #dbc59e;
}
.control-group.error > label,
.control-group.error .help-block,
.control-group.error .help-inline {
color: #b94a48;
}
/*表单错误状态下效果*/
.control-group.error .checkbox,
.control-group.error .radio,
.control-group.error input,
.control-group.error select,
.control-group.error textarea {
color: #b94a48;
border-color: #b94a48;
}
/*表单错误状态并获取焦点时效果*/
.control-group.error .checkbox:focus,
.control-group.error .radio:focus,
.control-group.error input:focus,
.control-group.error select:focus,
.control-group.error textarea:focus {
border-color: #953b39;
box-shadow: 0 0 6px #d59392;
}
.control-group.success > label,
.control-group.success .help-block,
.control-group.success .help-inline {
color: #468847;
}
/*表单成功状态下效果*/
.control-group.success .checkbox,
.control-group.success .radio,
.control-group.success input,
.control-group.success select,
.control-group.success textarea {
color: #468847;
border-color: #468847;
}
/*表单成功状态于并获得焦点下效果*/
.control-group.success .checkbox:focus,
.control-group.success .radio:focus,
.control-group.success input:focus,
.control-group.success select:focus,
.control-group.success textarea:focus {
border-color: #356635;
box-shadow: 0 0 6px #7aba7b;
}
.form-actions {
padding: 17px 20px 18px;
margin-top: 18px;
margin-bottom: 18px;
background-color: #f5f5f5;
border-top: 1px solid #e5e5e5;
*zoom: 1;
}
.form-actions:before,
.form-actions:after {
display: table;
content: "";
}
.form-actions:after {
clear: both;
}
/*按钮基本样式*/
.btn {
display: inline-block;
*display: inline;
/*由于篇幅，基本样式在此省略，详细请查阅随书代码*/
}
.btn:hover,
.btn:active,
.btn.active,
.btn.disabled,/*按钮禁用下效果，等效于.btn:disabled*/
.btn[disabled] {
background-color: #e6e6e6;
*background-color: #d9d9d9;
}
.btn:active,
.btn.active {
background-color: #cccccc \9;
}
.btn:first-child {
*margin-left: 0;
}
.btn:hover {
color: #333333;
text-decoration: none;
background-color: #e6e6e6;
*background-color: #d9d9d9;
background-position: 0 -15px;
-webkit-transition: background-position 0.1s linear;
-moz-transition: background-position 0.1s linear;
-ms-transition: background-position 0.1s linear;
-o-transition: background-position 0.1s linear;
transition: background-position 0.1s linear;
}
.btn:focus {
outline: thin dotted #333;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.btn.active,
.btn:active {
background-color: #e6e6e6;
background-color: #d9d9d9 \9;
background-image: none;
outline: 0;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15),
0 1px 2px rgba(0, 0, 0, 0.05);
}
/*表单按钮禁用状态下效果*/
.btn.disabled,/*等效于.btn:disabled*/
.btn[disabled] {
cursor: default;
background-color: #e6e6e6;
background-image: none;
opacity: 0.65;
filter: alpha(opacity=65);
box-shadow: none;
}
...//省略部分代码
注意 以上样式代码摘选于Bootstrap中的表单元素样式（详细内容参见http://twitter.github.com/ bootstrap/base-css.html#forms）。
上面案例主要展示的是表单元素得到焦点和禁用两种状态使用方法，在使用UI状态选择器时特别注意，HTML结构中要存在这种状态，例如禁用的输入框，需要在HTML的对应元素上添加禁用属性。
<input class="input-xlarge disabled" id="disabledInput"
type="text" placeholder="Disabled input here..." disabled="">
