Input number with in- / out-of-range validation

in-out-of-range.css

/* CSS */

.input-field:valid {
  border-color: lightgreen;
  background-color: rgba(lightgreen, 0.1);
}

.input-field:valid ~ .msg-validation::before {
  display: none;
}

.input-field:invalid {
  border-color: red;
  background-color: rgba(red, 0.1);
}

.input-field:out-of-range + .msg-validation::before {
    content: 'Неверное значение';
}

in-out-of-range.html

<!-- HTML -->

<div class="form-group">
  <label class="input-label" for="in-range">In-range input</label>
  <input class="input-field" type="number" id="in-range"
         min="1" max="10" value="8" required>
  <span class="msg-validation range"> ( введите значение между 1 и 10 )</span>
</div>
<div class="form-group">
  <label class="input-label" for="out-of-range">Out-of-range input</label>
  <input class="input-field" type="number" id="out-of-range"
         min="1" max="10" value="12" required>
  <span class="msg-validation range"> ( введите значение между 1 и 10 )</span>
</div>