<fieldset>
  <legend>请输入数值</legend>
  <input class="in_number" type="number" min=5 max=10>
</fieldset>
body {
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

fieldset {
  width: 300px;
}

input[type=number]:out-of-range {
  border-color: red;
}

input[type=number]:in-range {
  border-color: green;
}

.in_number {
  width: 100%;
  border-width: 1px;
  border-style: solid;
  outline: none;
  border-radius: 4px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.