จัดสไตล์ <input> ที่ค่านอกช่วงด้วย :out-of-range Selector

ใช้ :out-of-range เพื่อจัดสไตล์ <input type="number"> ที่มีค่าอยู่นอกช่วง min ถึง max

ตัวอย่าง

<!DOCTYPE html>
<html>
<head>
    <style>
        input:out-of-range {
            border: 3px dashed orange;
            background: yellow;
        }
    </style>
</head>
<body>
    <input type="number" min="5" max="10" value="15">
    <p>The style only works for the value entered out of range</p>
</body>
</html>

ผลลัพธ์: Input ที่ Value = 15 (นอกช่วง 5-10) จะมีขอบสีส้มประพื้นหลังสีเหลือง