CSS：好玩的‘伪类’系列之——(:valid和:invalid)

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/gavincz/article/details/89675435

:valid

定义：针对任意内容通过验证的 <input> 或其他 <form> 元素，修改样式

触发条件：当用户输入的值通过验证（有效）时，修改其样式

兼容：IE11以下不支持 Edge12以下不支持

:invalid

定义：针对任意内容未通过验证的 <input> 或其他 <form> 元素，修改样式

触发条件：当用户输入的值未通过验证（无效）时，修改其样式

兼容：IE11以下不支持 Edge12以下不支持

举个栗子

html代码：

<form>
  <label for="url_input">请输入网址:</label>
  <input type="url" id="url_input" />
  <br />
  <br />
  <label for="email_input">请输入Emaild地址:</label>
  <input type="email" id="email_input" />
  <span>表单字段填写不规范，请检查后重新输入！</span>
</form>

css代码：

form{
  width: 28%;
  padding: 10px;
  margin: 0 auto;
}
label{
  cursor: pointer;
}
span{
  margin-top: 20px;
  width: 320px;
  border: 1px solid red;
  color: red;
  line-height: 30px;
  text-align: center;
}
form:valid{
  border:5px solid transparent;
}
form:invalid{
  border:5px solid red;
}
input:valid {
  background-color: #ddffdd;
}
input:invalid {
  background-color: #ffdddd;
}
input:required:invalid {
  border-color: #C00000;
}
input:required {
  border-color: #800000;
  border-width: 3px;
}
input:valid~span{
  display: none;
}
input:invalid~span {
  display: block;
}

效果图：