x
 
<!DOCTYPE html>
<html>
<head>
<style>
input:in-range {
  border: 2px solid green;
  background-color: beige;
}
</style>
</head>
<body>
<h1>:in-range 实例</h1>
<p>请输入一个介于 1 到 10 之间的数字:<input type="number" min="1" max="10" value="7"></p>
<p>尝试输入一个超出范围(小于 1 或大于 10)的数字,看看样式如何消失。</p>
</body>
</html>