<div class="container">
  <p>The following number input will be red as long as the value is outside 1 and 10. Try changing the value to a value that is whitin range to see its style change.</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: 700px;
}

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

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

input:in-range + label::after {
  content: "Choose a value between 1 and 10.";
}

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

input:out-of-range + label::after {
  content: "This value is out of range! Pick another one.";
  color: tomato;
}