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;
}
: