CSS :valid选择器,匹配有效值表单
:valid选择器语法
E:valid{样式设置}
:valid选择器可以用于匹配获取拥有(包括输入的)经过元素设置验证为有效值的表单元素。
:valied选择器适用的表单元素类型(仅供参考):
- 设置了min或max属性之一或二者都设置的input元素;
- type属性为email的input元素
提示:与:valid选择器对应的是:invalid选择器,:invalid选择匹配的是拥有无效值的元素。
:valid选择器实例代码,及在线编辑器
<input type='number' min='1'><br><br>
<input type='email'><br><br>
<style>
input:valid{background-color:skyblue;}
</style>
实例代码提示
上方的代码在线运行之后,input元素的背景色为skyblue,而当输入无效的值,比如分别输入0和1,背景色将消失,如果输入1和1@xx.com,背景色即可恢复。