CSS3学习笔记 之 UI元素状态伪类选择器

最新推荐文章于 2023-04-25 22:33:18 发布
最新推荐文章于 2023-04-25 22:33:18 发布
阅读量1.2k 收藏 10
点赞数
文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/atleks/article/details/38966765
版权

  UI元素状态伪类选择器主要用于表单元素上，提高网页的人机交互、操作逻辑以及页面的整体美观，其语法如下:

选择器类型功能描述
E:checked选中状态伪类选择器匹配选中的复选按钮或单选按钮表单元素
E:enabled启用状态伪类选择器匹配所有启用的表单元素
E:disabled不可用状态伪类选择器选择所有禁用的表单元素


浏览器兼容性: IE9以及以上版本，所有版本的FF，Chrome， Safari，Opera都支持UI元素状态伪类选择器。
下面的代码样例展示UI元素状态伪类选择器的效果： 
<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>UI元素状态伪类选择器使用</title>
	<style type="text/css">
form {
  margin: 0 0 18px;
}

fieldset {
  padding: 0;
  margin: 0;
  border: 0;
}

legend {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: 27px;
  font-size: 19.5px;
  line-height: 36px;
  color: #333333;
  border: 0;
  border-bottom: 1px solid #e5e5e5;
}

legend small {
  font-size: 13.5px;
  color: #999999;
}

label,
input,
button,
select,
textarea {
  font-size: 13px;
  font-weight: normal;
  line-height: 18px;
}

input,
button,
select,
textarea {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

label {
  display: block;
  margin-bottom: 5px;
}

select,
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
  display: inline-block;
  height: 18px;
  padding: 4px;
  margin-bottom: 9px;
  font-size: 13px;
  line-height: 18px;
  color: #555555;
}

input,
textarea {
  width: 210px;
}

textarea {
  height: auto;
}

textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 3px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
     -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
      -ms-transition: border linear 0.2s, box-shadow linear 0.2s;
       -o-transition: border linear 0.2s, box-shadow linear 0.2s;
          transition: border linear 0.2s, box-shadow linear 0.2s;
}

/*表单元素获得焦点效果*/
textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input: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);
}

input[type="radio"],
input[type="checkbox"] {
  margin: 3px 0;
  *margin-top: 0;
  line-height: normal;
  cursor: pointer;
}

input[type="submit"],
input[type="reset"],
input[type="button"],
input[type="radio"],
input[type="checkbox"] {
  width: auto;
}


select,
input[type="file"] {
  height: 28px;
  *margin-top: 4px;
  line-height: 28px;
}

select {
  width: 220px;
  border: 1px solid #bbb;
}

select[multiple],
select[size] {
  height: auto;
}
/*表单中下拉选择框、文件控件、单选按钮、复选按钮得到焦点时效果*/
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;
}

.radio,
.checkbox {
  min-height: 18px;
  padding-left: 18px;
}

.radio input[type="radio"],
.checkbox input[type="checkbox"] {
  float: left;
  margin-left: -18px;
}

.controls > .radio:first-child,
.controls > .checkbox:first-child {
  padding-top: 5px;
}

.radio.inline,
.checkbox.inline {
  display: inline-block;
  padding-top: 5px;
  margin-bottom: 0;
  vertical-align: middle;
}

.radio.inline + .radio.inline,
.checkbox.inline + .checkbox.inline {
  margin-left: 10px;
}


input,
textarea,
.uneditable-input {
  margin-left: 0;
}

/*禁用的input、select、textarea表单元素效果*/
input[disabled],/*等效于input:disabled*/
select[disabled],/*等效于select:disabled*/
textarea[disabled],/*等效于textarea:disabled*/
input[readonly],
select[readonly],
textarea[readonly] {
  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*/
input[type="radio"][readonly],
input[type="checkbox"][readonly] {
  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;
}

input:focus:required:invalid,
textarea:focus:required:invalid,
select:focus:required:invalid {
  color: #b94a48;
  border-color: #ee5f5b;
}

input:focus:required:invalid:focus,
textarea:focus:required:invalid:focus,
select:focus:required:invalid:focus {
  border-color: #e9322d;
  box-shadow: 0 0 6px #f8b9b7;
}

.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;
}

.uneditable-input {
  overflow: hidden;
  white-space: nowrap;
  cursor: not-allowed;
  background-color: #ffffff;
  border-color: #eee;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
}

:-moz-placeholder {
  color: #999999;
}

:-ms-input-placeholder {
  color: #999999;
}

::-webkit-input-placeholder {
  color: #999999;
}

.help-block,
.help-inline {
  color: #555555;
}

.help-block {
  display: block;
  margin-bottom: 9px;
}

.help-inline {
  display: inline-block;
  *display: inline;
  padding-left: 5px;
  vertical-align: middle;
  *zoom: 1;
}

.form-horizontal input,
.form-horizontal textarea,
.form-horizontal select,
.form-horizontal .help-inline {
  display: inline-block;
  *display: inline;
  margin-bottom: 0;
  *zoom: 1;
}
.form-horizontal .hide {
  display: none;
}


.control-group {
  margin-bottom: 9px;
}

legend + .control-group {
  margin-top: 18px;
  -webkit-margin-top-collapse: separate;
}

.form-horizontal .control-group {
  margin-bottom: 18px;
  *zoom: 1;
}

.form-horizontal .control-group:before,
.form-horizontal .control-group:after {
  display: table;
  content: "";
}

.form-horizontal .control-group:after {
  clear: both;
}

.form-horizontal .control-label {
  float: left;
  width: 140px;
  padding-top: 5px;
  text-align: right;
}

.form-horizontal .controls {
  *display: inline-block;
  *padding-left: 20px;
  margin-left: 160px;
  *margin-left: 0;
}

.form-horizontal .controls:first-child {
  *padding-left: 160px;
}

.form-horizontal .help-block {
  margin-top: 9px;
  margin-bottom: 0;
}

.form-horizontal .form-actions {
  padding-left: 160px;
}


.btn {
  display: inline-block;
  *display: inline;
  padding: 4px 10px 4px;
  margin-bottom: 0;
  *margin-left: .3em;
  font-size: 13px;
  line-height: 18px;
  *line-height: 20px;
  color: #333333;
  text-align: center;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  vertical-align: middle;
  cursor: pointer;
  background-color: #f5f5f5;
  *background-color: #e6e6e6;
  background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
  background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: linear-gradient(top, #ffffff, #e6e6e6);
  background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
  background-repeat: repeat-x;
  border: 1px solid #cccccc;
  *border: 0;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  border-color: #e6e6e6 #e6e6e6 #bfbfbf;
  border-bottom-color: #b3b3b3;
  border-radius: 4px;
  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
  filter: progid:dximagetransform.microsoft.gradient(enabled=false);
  *zoom: 1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}

.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;
}
.btn-primary,
.btn-primary:hover {
  color: #ffffff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

.btn-primary.active {
  color: rgba(255, 255, 255, 0.75);
}

.btn {
  border-color: #ccc;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}

.btn-primary {
  background-color: #0074cc;
  *background-color: #0055cc;
  background-image: -ms-linear-gradient(top, #0088cc, #0055cc);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0055cc));
  background-image: -webkit-linear-gradient(top, #0088cc, #0055cc);
  background-image: -o-linear-gradient(top, #0088cc, #0055cc);
  background-image: -moz-linear-gradient(top, #0088cc, #0055cc);
  background-image: linear-gradient(top, #0088cc, #0055cc);
  background-repeat: repeat-x;
  border-color: #0055cc #0055cc #003580;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#0088cc', endColorstr='#0055cc', GradientType=0);
  filter: progid:dximagetransform.microsoft.gradient(enabled=false);
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary.active,
.btn-primary.disabled,
.btn-primary[disabled] {
  background-color: #0055cc;
  *background-color: #004ab3;
}

.btn-primary:active,
.btn-primary.active {
  background-color: #004099 \9;
}

button.btn,
input[type="submit"].btn {
  *padding-top: 2px;
  *padding-bottom: 2px;
}

button.btn::-moz-focus-inner,
input[type="submit"].btn::-moz-focus-inner {
  padding: 0;
  border: 0;
}

	</style>
</head>
<body>
<form class="form-horizontal">
	<fieldset>
		<div class="control-group">
			<label class="control-label" for="focusedInput">Focused input</label>
			<div class="controls">
				<input class="input-xlarge focused" id="focusedInput" type="text" value="This is focused…">
			</div>
		</div>
		<div class="control-group">
			<label class="control-label">Uneditable input</label>
			<div class="controls">
				<span class="input-xlarge uneditable-input">Some value here</span>
			</div>
		</div>
		<div class="control-group">
			<label class="control-label" for="disabledInput">Disabled input</label>
			<div class="controls">
				<input class="input-xlarge disabled" id="disabledInput" type="text" placeholder="Disabled input here…" disabled="">
			</div>
		</div>
		<div class="control-group">
			<label class="control-label" for="optionsCheckbox2">Disabled checkbox</label>
			<div class="controls">
				<label class="checkbox">
				<input type="checkbox" id="optionsCheckbox2" value="option1" disabled="">
					This is a disabled checkbox
				</label>
			</div>
		</div>
		<div class="control-group warning">
			<label class="control-label" for="inputWarning">Input with warning</label>
			<div class="controls">
				<input type="text" id="inputWarning">
				<span class="help-inline">Something may have gone wrong</span>
			</div>
		</div>
		<div class="control-group error">
			<label class="control-label" for="inputError">Input with error</label>
			<div class="controls">
				<input type="text" id="inputError">
				<span class="help-inline">Please correct the error</span>
			</div>
		</div>
		<div class="control-group success">
			<label class="control-label" for="inputSuccess">Input with success</label>
			<div class="controls">
				<input type="text" id="inputSuccess">
				<span class="help-inline">Woohoo!</span>
			</div>
		</div>
		<div class="control-group success">
			<label class="control-label" for="selectError">Select with success</label>
			<div class="controls">
				<select id="selectError">
					<option>1</option>
					<option>2</option>
					<option>3</option>
					<option>4</option>
					<option>5</option>
				</select>
				<span class="help-inline">Woohoo!</span>
			</div>
		</div>
		<div class="form-actions">
			<button type="submit" class="btn btn-primary">Save changes</button>
			<button class="btn" disabled="disabled">Cancel</button>
		</div>
	</fieldset>
</form>
</body>
</html>

显示效果如下：


参考资料：

atleks
关注
CSS【选择器】学习笔记
lemossrkilakila
02-02 288
CSS CSS3 选择器 学习笔记 选择器优先级 结构伪类选择器 动态伪类选择器 UI伪类选择器 打印伪类选择器 伪元素选择器 属性选择器
html+css+js 学习笔记之css篇
CSDN@YuanDaiMa2048的博客
08-16 60
第二部分 持续记录学习html5+css3+js时的一些课程笔记
第39章 UI元素状态伪类选择器
04-23
NULL 博文链接：https://onestopweb.iteye.com/blog/2262510
UI状态伪类选择器
seimeii的博客
11-16 847
所谓UI选择器：就是只有当元素处于某种状态下时，才起作用，在默认状态下不起作用！ 浏览器兼容性： E:hover 支持firefox、safari、Opera、ie8、chrome ------------ E:active 支持firefox、safari、Opera、chrome 不支持ie8 E:focus 支持firefox、safari
UI元素状态伪类选择器
独立开发者 | 跨境电商
06-11 2971
E:hover   用于指定当鼠标指针移动到元素上面时元素所使用的样式； E:action  用于指定元素被激活（鼠标在元素上按下还没有松开）时所使用的样式； E:focus   用于指定元素获得光标焦点时所使用的样式，主要是在文本框空间获得焦点并进行文字输入时使用的样式； E:enable  设置该元素处于可用状态的样式； E:disabled  设置该元素处于不可用状态时的样式； E
css---UI元素状态伪类选择器上
sjpgyy的博客
06-06 347
css—UI元素状态伪类选择器上 1.选择器E:hover,E:active和E:focus 1）E:hover选择器被用来指定当鼠标指针移动到元素上时元素所使用的样式； <元素>：hover{ css样式 } 在“<元素>”中添加元素的type属性。 例：input[type=“text”]:hover{ css样式 } 2)E:active选择器被用来指定元素被激活时使用的样式 3）E:focus选择器被用来指定元素获得光标聚焦点使用的样式，主要是在文本框控件获得聚焦点并进行文字
状态伪类选择器
cyx13504213312的博客
08-17 181
状态伪类选择器
CSS学习笔记（手写版）
最新发布
07-26
- **基本选择器**：包括类型选择器（例如`p`选择所有的`<p>`元素）、类选择器（例如`.example`选择class为`example`的所有元素）、ID选择器（例如`#unique`选择id为`unique`的元素）。 - **组合选择器**：可以通过...
精美的css3左侧竖直分类导航菜单ui特效.zip
09-23
首先，CSS3（Cascading Style Sheets 3）是Web样式表语言的最新版本，提供了许多强大的功能，如动画、过渡和新选择器等。在这个特效中，CSS3被用来创建美观、响应式的左侧竖直导航菜单。利用CSS3的伪类、边框和背景...
css笔记学习整理.pdf
10-14
10. UI元素状态伪类选择器：如`:focus`、`:checked`，根据元素的交互状态来设置样式。 11. 属性选择器：如`[attr=value]`，选取具有特定属性值的元素。 【CSS规则样式】规则样式主要涵盖各种文本、列表、边框、浮动...
css3之UI元素状态伪类选择器实例演示
09-27
主要介绍了css3之UI元素状态伪类选择器 ,其中包括hover、active和focus,enabled,disabledread-only与read-write 等等,需要的朋友可以参考下
css3 - UI元素状态伪类选择器
erdouzhang
04-27 4240
特征：指定的样式只有在某种状态下才起作用 共11种分别为：E:hover、E:active、E:focus、E:enable、E:disable、E:read-only、E:read-write、E:checked、E:default、E:indeterminate、E:selection各UI元素状态伪类选择器受浏览器的支持情况 选择器 Firefox Safari Opera
目标伪类选择器&元素状态伪类
wangming2531的博客
10-11 703
目标伪类选择器： 举例说明一下他的用途，比如点击一个文字或是图标实现跳到顶部，这时候可以用的这个目标伪类选择器 用于匹配当前激活的【锚点元素】 语法： 目标选择器 :target{} new document //点击跳转到我在东北玩泥巴! 跳转至东北 //点击跳转到黏住过客的思念 跳转至江南 //点击跳转到雨到.这里缠成线，点击这个跳转的明显 跳转至上海 我在东北玩泥巴! 黏住过客的思
CSS3学习笔记（八）——UI元素状态伪类选择器
Bambi12的博客
12-04 502
UI元素状态伪类选择器也是CSS3选择器模块组中的一部分，此类选择器主要运用于form表单元素上，用来提高网页的人机交互、操作逻辑以及页面的整体美观。 1、:enabled和:disabled 要正常使用“:disabled”选择器，需要在表单元素的HTML中设置“disabled”属性。 &lt;form action="#"&gt; &lt;div&gt; &lt;labe...
CSS笔记（三）：UI伪类选择器
Ui_none的博客
04-11 592
UI伪类选择器 那么这次就来做下关于UI伪类选择器的笔记。 图片引用自鱼C-小甲鱼的Web开发系列网课 既然名为UI伪类选择器，那么基本上就应用在带框、按钮、表单等可视、可交互的元素上。 首先来谈谈:enabled和:disabled这两个伪类选择器。 部分元素如输入框、密码框、复选框等都具有:enabled和:disabled这两种状态。通过设置这两种状态下的样式可以看到表单元素在这两种状态下的外观。 例子： <!-- 照样忽略了html等标签 --> <style typ
UI伪类选择器
JunGuanDreams的博客
04-25 130
3，：disabled不可用的表单元素（有disabled)属性。2，：enable可用的表单元素（没有disabled)属性。1，：checked被选中的复选框或单选按钮。
CSS之UI伪类选择器
m0_64694079的博客
01-13 389
CSS之UI伪类选择器
Python UI自动化实践：CSS选择器与浏览器操作
"Python UI自动化day3的学习笔记主要涵盖了CSS的选择器以及元素和浏览器的属性与方法，这些是进行UI自动化测试的基础知识。" 在Python UI自动化测试中，CSS（Cascading Style Sheets）是一种用于描述HTML或XML...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值