图解css3:核心技术与案例实战. 2.7 UI元素状态伪类选择器-阿里云开发者社区

开发者社区> 华章计算机> 正文

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

简介:
+关注继续查看

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="">

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Android开发学习之使用Toolbar实现不同的Fragment使用不同颜色的标题栏与状态栏
Android开发学习之使用Toolbar实现不同的Fragment使用不同颜色的标题栏与状态栏                                            先看效果图。
2295 0
【iOS开发】解决 UITableview 中选中 Cell 后,Cell 复用导致选中状态消失、应用闪退的问题
如图,是一个可以多项选择的 UITableview,但是因为 iOS 的 Cell 复用机制,即下面的 reuseIdentifier 部分 let cell:UITableViewCell=UITableViewCell(style:UITableViewCellStyle.
1116 0
10059
文章
0
问答
来源圈子
更多
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载