<!DOCTYPE html>
<html>
<head>
<style>
input:user-valid { border: 2px solid green;
background-color: beige;
}
input:user-valid + span::before { content: "V";
color: green;
}
</style>
</head>
<body>
<h1>:user-valid 演示</h1>
<p>尝试输入一个合法的电子邮件地址。</p>
<p>尝试输入一个合法的数字。</p>
<form>
<label for="name">姓名：</label><br>
<input id="name" name="name" type="text" /><br>
<label for="email">邮箱：</label><br>
<input id="email" name="email" type="email" required /> <span></span>
<p>输入一个介于 1 到 10 之间的数字：<input type="number" min="1" max="10" /></p>
</form>
</body>
</html>