<div class="container">
  <p>数字在1~10范围内会出🥰，不在这个范围出😂，尝试着改变输入框的值！</p>
  <input id="range" type="number" min="1" max="10" value="12">
  <label for="range"></label>
</div>

body {
  background-color: #f5f5f5;
  color: #555;
  font-size: 1.1em;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

hr {
  margin: 50px 0;
}

.container {
  margin: 40px auto;
  max-width: 50vw;
  text-align: center;
}

input {
  width: 100px;
  height: 40px;
  font-size: 1.4em;
  margin-right: 0.6em;
}

input[type="number"]:in-range {
  background-color: lightgreen;
  color: green;
}

input[type="number"]:out-of-range {
  background-color: salmon;
  border: 1px solid tomato;
  color: white;
}

input:in-range + label::after {
  content: "🥰";
  font-size: 2rem;
}

input:out-of-range + label::after {
  content: "😂";
  font-size: 2rem;
}