<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.