|
Сообщение от laimas
|
|
А ручной ввод почему не проверяется, можно же и меньше нуля, и буквы ввести.
|
Он всё-равно не проходит проверку.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
input[type="number"] {
font-size: 400%;
border: 1px solid #aaa;
border-radius: .1em;
background: hsl(var(--hue), 100%, 95%);
border-color: hsl(var(--hue), 100%, 50%);
}
input[type="number"]:valid {
--hue: 120;
}
input[type="number"]:invalid {
--hue: 0;
}
input[type="number"]::-webkit-inner-spin-button {
margin-right: .1em;
opacity: 1;
-webkit-appearance: none;
background:
url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="200">\
<style>\
text { font: 100px monospace; pointer-events: none; }\
rect { width: 98px; height: 98px; fill: %23eee; fill-opacity: .75;\
stroke-opacity: .75; stroke: black; stroke-width: 2px; x:1.5px; }\
rect:hover { fill: %23bbb; }\
<%2fstyle>\
<rect y="1.5"/><rect y="100"/>\
<text x="20" y="75">+</text>\
<text x="20" y="175">-</text>\
</svg>')
no-repeat
center / contain
;
width: .5em;
}
</style>
</head>
<body>
<input type="number" min="0" max="5" step="1" value="0">
<input type="number" min="0" max="5" step="1" value="0">
</body>
</html>