CSS3学习笔记之属性选择器(下)

1 :enabled选择器

在Web的表单中，有些表单元素有可用（“:enabled”）和不可用（“:disabled”）状态，比如输入框，密码框，复选框等。在默认情况之下，这些表单元素都处在可用状态。那么我们可以通过伪选择器“:enabled”对这些表单元素设置样式。

示例演示

通过“:enabled”选择器，修改文本输入框的边框为2像素的红色边框，并设置它的背景为灰色。

HTML代码:

<form action="#">
<div>
<label for="name">Text Input:</label>
<input type="text" name="name" id="name" placeholder="可用输入框"  />
</div>
<div>
<label for="name">Text Input:</label>
<input type="text" name="name" id="name" placeholder="禁用输入框"  disabled="disabled" />
</div>
</form>

CSS代码：

div{
margin: 20px;
}
input[type="text"]:enabled {
background: #ccc;
border: 2px solid red;
}

结果演示

2:disabled选择器

“:disabled”选择器刚好与“:enabled”选择器相反，用来选择不可用表单元素。要正常使用“:disabled”选择器，需要在表单元素的HTML中设置“disabled”属性。

示例演示

通过“:disabled”选择器，给不可用输入框设置明显的样式。

HTML代码：

<form action="#">
<div>
<input type="text" name="name" id="name" placeholder="我是可用输入框" />
</div>
<div>
<input type="text" name="name" id="name" placeholder="我是不可用输入框" disabled />
</div>
</form>

CSS代码

form {
margin: 50px;
}
div {
margin-bottom: 20px;
}
input {
background: #fff;
padding: 10px;
border: 1px solid orange;
border-radius: 3px;
}
input[type="text"]:disabled {
background: rgba(0,0,0,.15);
border: 1px solid rgba(0,0,0,.15);
color: rgba(0,0,0,.15);
}

结果演示：

3:checked选择器

在表单元素中，单选按钮和复选按钮都具有选中和未选中状态。（大家都知道，要覆写这两个按钮默认样式比较困难）。在CSS3中，我们可以通过状态选择器“:checked”配合其他标签实现自定义样式。而“:checked”表示的是选中状态。

示例演示：

通过“:checked”状态来自定义复选框效果。

HTML代码

<form action="#">
<div class="wrapper">
<div class="box">
<input type="checkbox" checked="checked" id="usename" /><span>√</span>
</div>
<lable for="usename">我是选中状态</lable>
</div>

<div class="wrapper">
<div class="box">
<input type="checkbox"  id="usepwd" /><span>√</span>
</div>
<label for="usepwd">我是未选中状态</label>
</div>
</form>

CSS代码：

form {
border: 1px solid #ccc;
padding: 20px;
width: 300px;
margin: 30px auto;
}

.wrapper {
margin-bottom: 10px;
}

.box {
display: inline-block;
width: 20px;
height: 20px;
margin-right: 10px;
position: relative;
border: 2px solid orange;
vertical-align: middle;
}

.box input {
opacity: 0;
positon: absolute;
top:0;
left:0;
}

.box span {
position: absolute;
top: -10px;
right: 3px;
font-size: 30px;
font-weight: bold;
font-family: Arial;
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
color: orange;
}

input[type="checkbox"] + span {
opacity: 0;
}

input[type="checkbox"]:checked + span {
opacity: 1;
}

结果演示

4 ::selection选择器

“::selection”伪元素是用来匹配突出显示的文本。浏览器默认情况下，选择网站文本是深蓝的背景，白色的字体，效果如下图所示：





有的设计要求,不使用上图那种浏览器默认的突出文本效果，需要一个与众不同的效果，此时“::selection”伪元素就非常的实用。不过在Firefox浏览器还需要添加前缀。

示例演示:

通过“::selection”选择器，将Web中选中的文本背景变成红色，文本变成绿色。

HTML代码：

<p>“::selection”伪元素是用来匹配突出显示的文本。浏览器默认情况下，选择网站文本是深蓝的背景，白色的字体，</p>

CSS代码：

::-moz-selection {
background: red;
color: green;
}
::selection {
background: red;
color: green;
}

结果演示：

5 :read-only选择器

“:read-only”伪类选择器用来指定处于只读状态元素的样式。简单点理解就是，元素中设置了“readonly=’readonly’”

HTML代码：

<form action="#">
<div>
<label for="name">姓名:</label>
<input type="text" name="name" id="name" placeholder="大漠" />
</div>
<div>
<label for="address">地址:</label>
<input type="text" name="address" id="address" placeholder="中国上海" readonly="readonly" />
</div>
</form>

CSS代码：

form {
width: 300px;
padding: 10px;
border: 1px solid #ccc;
margin: 50px auto;
}
form > div {
margin-bottom: 10px;
}

input[type="text"]{
border: 1px solid orange;
padding: 5px;
background: #fff;
border-radius: 5px;
}

input[type="text"]:-moz-read-only{
border-color: #ccc;
}
input[type="text"]:read-only{
border-color: #ccc;
}

结果演示

6:read-write选择器

“:read-write”选择器刚好与“:read-only”选择器相反，主要用来指定当元素处于非只读状态时的样式。

示例演示
使用“:read-write”选择器来设置不是只读控件的文本框样式。

HTML代码：

<form action="#">
<div>
<label for="name">姓名:</label>
<input type="text" name="name" id="name" placeholder="大漠" />
</div>
<div>
<label for="address">地址:</label>
<input type="text" name="address" id="address" placeholder="中国上海" readonly="readonly" />
</div>
</form>

CSS代码：

form {
width: 300px;
padding: 10px;
border: 1px solid #ccc;
margin: 50px auto;
}
form > div {
margin-bottom: 10px;
}

input[type="text"]{
border: 1px solid orange;
padding: 5px;
background: #fff;
border-radius: 5px;
}

input[type="text"]:-moz-read-only{
border-color: #ccc;
}
input[type="text"]:read-only{
border-color: #ccc;
}

input[type="text"]:-moz-read-write{
border-color: #f36;
}
input[type="text"]:read-write{
border-color: #f36;
}

结果演示：

7:default选择器

“:default”选择器用来指定当页面打开时默认状态处于选取状态的单选按钮或复选框控件的样式。

我们来看一个简单的示例，代码见右边编辑器内容代码：

只可惜的是，这个选择器的效果到现在为止，还没有浏览器能支持，只能通过下图模拟实现的效果：



特别注意：如果你将单选按钮或复选框选中状态设置为非选中状态，“:default”选择器中指定的样式仍然有效。也就是说，“:default”设置了选中状态的样式，当浏览器加载完之后，用户将选中状态取消，复选框同样具有“:default”设置的样式。如下图所示：

8 :indeterminate选择器

“:indeterminate”选择器用来指定当页面打开时，如果一组单选按钮中任何一个单选按钮都没有被设定为选中状态时整组单选按钮的样式，如果用户选取了其中任何一个单选按钮，则该样式被取消指定。

来看一个示例，注意：代码在右边编辑器中。

我们有一组单选按钮，用“:indeterminate”选择器给他们设置了一个样式，其效果如下：





一旦用户选择了其中的任何一个单选按钮，那么“:indeterminate”给这组单选按钮设置的样式都会被取消，如下图所示