css3表单选择器
时间：6年前 阅读：4900
css3 表单常用选择器
一、:enabled选择器
定义：在Web的表单中，有些表单元素有可用（“:enabled”）和不可用（“:disabled”）状态，
比如输入框，密码框，复选框等。在默认情况之 下，这些表单元素都处在可用状态。那么我们可以通过伪选择器“:enabled”对这些表单元素设置样式。
例如：
input[type="text"]:enabled {/*修改文本输入框的边框为2像素的红色边框*/
order: 2px solid red;
}
二、:disabled选择器
定义：“:disabled”选择器刚好与“:enabled”选择器相反，用来选择不可用表单元素。
要正常使用“:disabled”选择器，需要在表单元素的HTML中设置“disabled”属性。
例如：
input[type="text"]:disabled {/*给不可用输入框设置明显的样式*/
background: rgba(0,0,0,.15);
border: 1px solid rgba(0,0,0,.15);
color: rgba(0,0,0,.15);
}
三、:checked选择器
定义：在表单元素中，单选按钮和复选按钮都具有选中和未选中状态。（大家都知道，要覆写这两个按钮默认样式比较困难）。
在CSS3中，我们可以通过状态选择器“:checked”配合其他标签实现自定义样式。而“:checked”表示的是选中状态。
例如：
input[type="checkbox"]:checked + span {/*自定义复选框选中的效果*/
opacity: 1;
}
四、:selection选择器
定义：:selection”伪元素是用来匹配突出显示的文本
例如：
::-moz-selection {/*用鼠标选择网页文本 被选中的背景是红色 字体颜色变绿*/
background: red;
color: green;
}
::selection {
background: red;
color: green;
}
五、:read-only选择器
定义：“:read-only”伪类选择器用来指定处于只读状态元素的样式。简单点理解就是，元素中设置了“readonly=’readonly’”
例如：
input[type="text"]:read-only{/*设置只读文本框的样式。*/
border-color: #ccc;
}
input[type="text"]:-moz-read-only{
border-color: #ccc;
}
六、:read-write选择器
定义：“:read-write”选择器刚好与“:read-only”选择器相反，主要用来指定当元素处于非只读状态时的样式。
例如：
input[type="text"]:-moz-read-write{/*设置读写文本框的样式。*/
border-color: #f36;
}
input[type="text"]:read-write{
border-color: #f36;
}
七、::before和::after
定义：::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常和"content"配合使用，使用的场景最多的就是清除浮动。
例如：
.clearfix::before,
.clearfix::after {
content: ".";
display: block;
height: 0;
visibility: hidden;
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*选择获得焦点状态的input元素*/
/*input:focus{
background: orange;
}*/
/*选择已启用的*/
/*input:enabled{
background: blue;
}*/
/*选择未启用（禁用）的*/
/*input:disabled{
background: orange;
}*/
/*选择每个被选中的input元素，这个不好使，不显示出来*/
input:checked{
background: purple;
}
</style>
</head>
<body>
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="text" />
<input type="text" />
<!-- disabled未启用的 -->
<input type="text" value="666" disabled="disabled" />
</body>
</html>
本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知
网友评论