css3 选择器（三）

这篇和前两篇内容相关性不大，主要是涉及到一些css3的状态选择器，所以标题从一开始。

一看这个属性就知道是专为表单元素提供的。在表单中输入框，密码框，复选框都有可用(:enabled)和不可用（:disabled）状态，默认情况，这些表单元素都处在可用状态。可通过选择器:enabled为这些表单元素设置样式。

举例：可用输入框设置样式。

<meta charset="utf-8">
<style>
div {
    margin: 30px;
}
input[type="text"]:enabled {
    border: 1px solid #f36;
    box-shadow: 0 0 5px #f36;
}
</style>

<form action="#">
<div>
<label>可用输入框:<input type="text"/></label>
</div>
<div>
<label>禁用输入框:<input type="text" disabled="disabled"/></label>
</div>
</form>

css3 选择器（三）

二、【：disabled】选择器

看到有【:enabled】选择器，就知道肯定有【:disabled】选择器了。看名字就知道:disabled选择器和:enabled选择器相反，用来匹配不可用的表单元素。要使用:disabled选择器，需要在表单元素中设置"disbled"属性。

举例：

<meta charset="utf-8">
<style type="text/css">
form {
    margin: 30px;
}
div {
    margin: 10px;
}
input {
    padding: 10px;
    border: 1px solid orange;
    background: #fff;
    border-radius: 5px;
}
input[type="submit"] {
    background: orange;
    color: #fff;
}
input[type="submit"]:disabled {
    background: #eee;
    border-color: #eee;
    color: #ccc;
}
</style>

<form action="#">
<div><input type="text"/></div>
<div>
<input type="submit"value="我要回到上一步"/>
<input type="submit"value="禁止点下一步"disabled />
</div>
</form>

css3 选择器（三）

三、【:checked】选择器

在表单元素中，单选按钮和复选按钮都有选中和未选中状态。如果有做过尝试就知道，要设置这两个按钮默认样式是比较困难的。而在css3中，可以通过:checked选择器配合其他标签实现自定义样式。而:checked表示的是选中状态。

这个是个大招，可以省不少功夫。

举例：使用:checked选择器模拟实现复选框样式。【坑：点选框时无法选中，必须点文字才能选中】update:15/10/23

<meta charset="utf-8">
<style type="text/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;
}

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

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

View Code

二、【：disabled】选择器

三、【:checked】 选择器

三、【:checked】选择器