<form>
	<input id="num" type="number" min="10" max="20" value="8">
  <label for="num"></label><br><br>
	<button type="reset">Reset</button>
</form>
body {
	font-family: arial;
}

li {
  list-style: none;
  margin-bottom: 1em;
}

input {
  border: 1px solid black;
}

input:in-range {
  background-color: rgba(0, 255, 0, 0.25);
  border: 2px solid green;
}

input:out-of-range {
  background-color: rgba(255, 0, 0, 0.25);
  border: 2px solid red;
}

input:in-range + label::after {
  content: 'In range';
}

input:out-of-range + label::after {
  content: 'Out of range';
}

input + label::after {
	font-size: 0.7em;
	font-style: italic;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.