图解css3：核心技术与案例实战. 2.7 UI元素状态伪类选择器

<b>2.7　ui元素状态伪类选择器</b>

ui元素状态伪类选择器也是css3选择器模块组中的一部分，主要用于form表单元素上，以提高网页的人机交互、操作逻辑以及页面的整体美观，使表单页面更具个性与品位，而且使用户操作页面表单更便利和简单。

<b>2.7.1　ui元素状态伪类选择器语法</b>

ui元素的状态一般包括：启用、禁用、选中、未选中、获得焦点、失去焦点、锁定和待机等。在html元素中有可用和不可用状态，例如表单中的文本输入框；html元素中还有选中和未选中状态，例如表单中的复选按钮和单选按钮。这几种状态都是css3选择器中常用的状态伪类选择器，详细说明如表2-11所示。

表2-11　ui元素状态伪选择器语法

选择器     类型         功能描述

e:checked         选中状态伪类选择器     匹配选中的复选按钮或单选按钮表单元素

e:enabled         启用状态伪类选择器     匹配所有启用的表单元素

e:disabled         不可用状态伪类选择器         匹配所有禁用的表单元素

<b>2.7.2　浏览器兼容性</b>

浏览器兼容性如表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状态效果，接着来看其实现代码。

&lt;!doctype html&gt;

&lt;html lang="en-us"&gt;

&lt;head&gt;

&lt;meta charset="utf-8"&gt;

&lt;title&gt;&lt;/title&gt;

  &lt;style

type="text/css"&gt;

/*表单基本样式，请查看对应示例代码*/

/*表单元素获得焦点效果*/

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 &gt; 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 {

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 &gt; 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 {

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 &gt; 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 {

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: "";

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 {

background-color: #cccccc \9;

.btn:first-child {

*margin-left: 0;

.btn:hover {

color: #333333;

  text-decoration:

none;

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 {

.btn:active {

background-color: #d9d9d9 \9;

background-image: none;

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*/

cursor: default;

opacity: 0.65;

filter: alpha(opacity=65);

box-shadow: none;

...//省略部分代码

注意   以上样式代码摘选于bootstrap中的表单元素样式（详细内容参见http://twitter.github.com/ bootstrap/base-css.html#forms）。

上面案例主要展示的是表单元素得到焦点和禁用两种状态使用方法，在使用ui状态选择器时特别注意，html结构中要存在这种状态，例如禁用的输入框，需要在html的对应元素上添加禁用属性。

&lt;input class="input-xlarge

disabled" id="disabledinput"

type="text" placeholder="disabled input here..."

disabled=""&gt;