Giả lớp checked

Giả lớp checked cho phép bắt checkbox hoặc radio đã được chọn.

Thật không may, không thể đặt kiểu để trang trí cho chúng. Ví dụ, không thể đặt màu nền hoặc màu viền (có thể đặt, ví dụ, chiều rộng và chiều cao, nhưng chúng sẽ không có tác động như mong đợi).

Dù vậy, có thể đặt kiểu cho các phần tử lân cận, ví dụ như sau: input:checked + p - chúng ta sẽ đặt kiểu cho đoạn văn nằm ngay bên dưới input đã được chọn.

Cú pháp

phần-tử:checked {
	
}

Ví dụ

Hãy chọn các checkbox và bạn sẽ thấy các nhãn label nằm ngay sau các checkbox đã chọn sáng lên màu đỏ:

<input type="checkbox" id="elem1">
<label for="elem1">Nhãn 1</label>
<br>
<input type="checkbox" id="elem2">
<label for="elem2">Nhãn 2</label>

input:checked + label {
	color: red;
}

Ví dụ

Hãy chọn radio và bạn sẽ thấy các nhãn label nằm ngay sau công tắc đã chọn sáng lên màu đỏ:

<input type="radio" name="elem" id="elem1">
<label for="elem1">Nhãn 1</label>
<br>
<input type="radio" name="elem" id="elem2">
<label for="elem2">Nhãn 2</label>

input:checked + label {
	color: red;
}