<div class="container">
  <form action="#">
    <ul>Values between 1 and 10 are valid.
      <li style="margin-top: 7.5px;">
        <input type="number" value="5" placeholder="1 - 10" id="value" min="1" max="10" autocomplete="off">
        <label for="value" id="value-status">Your value is </label>
      </li>
    </ul>
  </form>
</div>
body {
  height: 100vh;
  display: grid;
  place-items: center;
  font-family: Arial, sans-serif;
}

.container {
  -webkit-transform: scale(1.375);
  -moz-transform: scale(1.375);
  transform: scale(1.375);
}

.container form ul li {
  list-style-type: none;
}

input#value {
  border: 1px solid black;
  font-family: Arial, sans-serif;
}

input#value:in-range {
  background: rgba(0, 255, 0, .25);
  border-color: forestgreen;
}

input#value:out-of-range {
  background: rgba(255, 0, 0, .25);
  border-color: crimson;
}

input#value:in-range + label#value-status::after {
  content: 'okay.';
}

input#value:out-of-range + label#value-status::after {
  content: 'out of range!';
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.