x
 
<!DOCTYPE html>
<html>
<head>
<style>
input:valid {
  background-color: beige;
  border: 2px solid green;
}
</style>
</head>
<body>
<h1>:valid 演示</h1>
<p>尝试输入一个非法的电子邮件地址,看看样式如何消失。</p>
<p>尝试输入一个非法的数字,看看样式如何消失。</p>
<form>
  <label for="email">邮箱:</label><br>
  <input id="email" name="email" type="email" value="test@example.com" />
  <p>输入一个介于 1 到 10 之间的数字:<input type="number" min="1" max="10" value="10"></p>
</form>
</body>
</html>