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,背景色即可恢复。



全栈前端 / CSS教程 :



























Copyright © 2022-2024 笨鸟工具 x1y1z1.com All Rights Reserved.