บทบาทของ CSS :checked Selector

ใช้ CSS Pseudo-class :checked เพื่อจัดสไตล์ <input> ทุกตัวที่ถูกเลือก (Checked) เช่น Checkbox, Radio button

ตัวอย่าง

<!DOCTYPE html>
<html>
<head>
    <style>
        input:checked {
            height: 20px;
            width: 20px;
        }
    </style>
</head>
<body>
    <p>Fav sports:</p>
    <form action="">
        <input type="checkbox" value="Football">Football<br>
        <input type="checkbox" value="Cricket">Cricket<br>
        <input type="checkbox" checked="checked" value="Tennis"> Tennis<br>
        <input type="checkbox" value="Badminton">Badminton
    </form>
</body>
</html>

ผลลัพธ์: Checkbox "Tennis" ที่มี checked จะมีขนาด 20x20px