จัดสไตล์ <input> ที่ Disabled ด้วย CSS :disabled Selector

ใช้ CSS Pseudo-class :disabled เพื่อจัดสไตล์ <input> ทุกตัวที่ถูกปิดใช้งาน (มี attribute disabled)

ตัวอย่าง

<!DOCTYPE html>
<html>
<head>
    <style>
        input:enabled {
            background: blue;
        }
        input:disabled {
            background: red;
        }
    </style>
</head>
<body>
    <form action="">
        Subject <input type="text" name="subject"><br>
        Student: <input type="text" name="student"><br>
        Age: <input type="number" name="age" disabled><br>
    </form>
</body>
</html>

ผลลัพธ์: Input ที่ disabled จะมีพื้นหลังสีแดง ส่วนที่ enabled จะเป็นสีน้ำเงิน