Pseudo-class :checked trong CSS3

Định nghĩa và cách sử dụng

CSS :checked pseudo-class được sử dụng để khớp với bất kỳ yếu tố nào được chọn <input> hoặc <option> .

Áp dụng cho <input type="radio">, <input type="checkbox"> và yếu tố <option> trong <select>.

Mô hình

Ví dụ 1

Đặt một đường viền mỏng màu đỏ cho tất cả các yếu tố <input> được chọn:

input:checked {
  outline: 1px solid red;
}

Thử ngay

Ví dụ 2

Đặt các phong cách khác nhau cho nút chọn đơn, hộp chọn và tùy chọn khi được chọn:

input[type="radio"]:checked {
  box-shadow: 0 0 5px 3px blue;
}
input[type="checkbox"]:checked {
  box-shadow: 0 0 5px 3px maroon;
}
option:checked {
  color: blue;
  background-color: pink;
}

Thử ngay

Ngữ pháp CSS

:checked {
  các quy định css;
}

Chi tiết kỹ thuật

Hỗ trợ trình duyệt

Số trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ pseudo-class.