Tidadigi Logo

CSS :checked Selector

Bộ chọn :checked được dùng để chọn tất cả các phần tử đã được chọn trong thẻ input và radio. Bộ chọn này được sử dụng với các phần tử radio buttons, checkbox và option.

Syntax:

:checked {
    // CSS property
}

Example 1: Trong ví dụ này, CSS :checked selector nhắm mục tiêu các phần tử input được chọn. Nó đặt chiều cao và chiều rộng cho các checkbox được chọn và áp dụng màu xanh lá cây cho phần tử h1.

html 
<!DOCTYPE html>
<html>

<head>
    <title>
          checked selector property
      </title>
    <style>
        h1 {
            color: green;
        }

        input:checked {
            height: 8px;
            width: 10px;
        }

        body {
            width: 60%;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h2>:checked Selector</h2>
    <form action="">
        Gender:
        <input type="radio" 
               checked="checked" 
               value="male"
               name="gender"> 
        Male
        <input type="radio" 
               value="female" 
               name="gender"> 
        Female<br><br>
        Computer Science Subjects:<br>
        <input type="checkbox" 
               checked="checked" 
               value="Bike">
        Computer Network<br>
        <input type="checkbox" 
               checked="checked" 
               value="Bike">
        Operating System<br>
        <input type="checkbox" 
               value="Bike">
        Mathematics<br>
        <input type="checkbox" 
               value="Bike">
        Physics<br>
    </form>
</body>

</html>

Output: css-checked-selector

Example 2: Trong ví dụ này, CSS option:checked selector nhắm mục tiêu option được chọn. Option nằm trong phần tử <select>. Nó đặt chiều cao 10px và kích thước phông chữ 20px cho option này.

html 
<!DOCTYPE html>
<html>

<head>
    <title>checked selector</title>
    <style>
        option:checked {
            height: 10px;
            font-size: 20px;
        }

        h1 {
            color: green;
        }
    </style>
</head>

<body>
    <center>
        <h1>GeeksForGeeks</h1>
        <h2>:checked Selector in <option> Element</h2>
        <select>
            <option value="DataStructure">
                Data Structure
            </option>
            <option value="Computer Network">
                Computer Network
            </option>
            <option value="Operating System">
                Operating System
            </option>
            <option value="Computer Architecture">
                Computer Architecture
            </option>
        </select>
    </center>
</body>

</html>

Output: css-checked-selectorSupported Browsers: Các trình duyệt được hỗ trợ bởi :checked Selector được liệt kê dưới đây:

  • Apple Safari 3.1 trở lên
  • Google Chrome 1.0 trở lên
  • Edge 12.0 trở lên
  • Firefox 1.0 trở lên
  • Opera 9.0 trở lên

Last Updated : 21/07/2025