css选择器的输入伪类 - 实现Material Design风格的输入框样式体验

:enabled和:disabled的使用

使用细节点：

• input的输入框中，设置readonly(只读)属性也是可以匹配到:enabled的样式
• <a href></a>可以匹配:anabled的属性，却不能匹配:disabled的属性
• <select>下拉框可以匹配:enabled和:disabled
• contenteditable='true'与tabindex属性的元素也不能匹配:enabled伪类；
• 设置了visibility:hidden和display:none;依然可以匹配俩个伪类

为防止重复点击的请求，设置disabled=true；一个简洁与语义性良好的按钮监听事件的代码如下：

<style>
  .cs_btn:disabled {
      background: gray;
  }
</style>
<button id="csButton" class="cs_btn">按钮</button>
<script>
    csButton.addEventListener('click', function() {
        this.disabled = true;
        console.log("已点击过的click");
    })
</script>

:placeholder-show 占位符显示的伪类

与input中placeholder属性密切相关；input:placehplder-show {}

（1）实现Material Design风格

其主要的代码如下：

<style>
.input_box {
    position: relative;
}
.input_value {
    padding: 13px 16px 13px;
    border: 1px solid #d0d0d5;
    border-radius: 4px;
    transition: border-color .25s;
}
.input_value:placeholder-shown::placeholder {
    color: transparent;
}
.input_lab {
    position: absolute;
    left: 16px;
    top: 14px;
    transition: all .25s;
    pointer-events: none; // 跳过点击的target的事件
}
.input_value:not(:placeholder-shown) ~ .input_lab,
.input_value:focus ~ .input_lab {
    transform: scale(.75) translate(0, -32px);
}
</style>
<div class="input_box">
	<input class="input_value" type="text" placeholder="youxiang">
	<label for="" class="input_lab">邮箱</label>
</div>

呈现的效果如下列所示：

（2）用于空值逇判断

示例的代码如下：

<style>
    input:placeholder-shown + small::before,
    textarea:placeholder-shown + small::before {
        content: '尚未输入内容';
        color: red;
        font-size: 14px;
    }
</style>
<div>
    <input placeholder=" "><small></small>
    <textarea placeholder=" " ></textarea><small></small>
</div>

展示效果如下图所示：

:default默认选项实例

:default默认选项的匹配，selected或checked的值必须有一个为true，不写的情况是默认第一项，但不匹配:default的伪类
伪类的实际应用，推荐标记，代码如下：

<style>
    input:default + label::after {
        content: "（推荐）";
    }
</style>
<p><input type="radio" name="pay" id="pay0" value="0"> <label for="pay0">支付宝</label></p>
<p><input type="radio" name="pay" id="pay1" value="1" checked> <label for="pay1">微信</label></p>
<p><input type="radio" name="pay" id="pay2" value="2"> <label for="pay2">银行卡</label></p>

展示效果如下图所示：

:checked选中选项的伪类

[checkout]与:checked的区别：

1. :checkout只能匹配标准的表单控件元素，不能匹配其它的普通元素；

:checked { background: darkcyan;} // 只对表单生效
[checked] { border: 1px solid; } // 匹配属性
<canvas checkbox width="120" height="80"></canvas>

2. [checkbox]并非实时的，都使用:checked不会出现这种情况；
3. :checked是可以从父类中继承而来，但是[checked]属性不行

:indeterminate不确定值的伪类；(相当于不全选的伪类)

1，与复选框的使用

2，与单选框的使用

输入值的验证

• :valid 、:invalid;默认情况下匹配:valid，设置了require(必填)时匹配:invalid
• :in-range，:out-of-range ;匹配输入框的值是否在此范围内
• :required,:optional匹配必填与可选