Trong CSS, việc áp dụng style cho phần tử điều khiển được chọn có thể mang lại nhiều lợi ích cho việc thiết kế giao diện người dùng. Selector :checked là một trong những pseudo-class phổ biến, và nó cho phép bạn áp dụng style cụ thể cho các phần tử như checkbox hoặc radio button khi chúng được chọn.
Cách Sử Dụng Pseudo-class :checked
Pseudo-class :checked được sử dụng để chọn những phần tử input có kiểu là checkbox hoặc radio khi chúng đang trong trạng thái được chọn. Dưới đây là cú pháp cơ bản:
input[type="checkbox"]:checked {
/* Style áp dụng cho checkbox được chọn */
}
input[type="radio"]:checked {
/* Style áp dụng cho radio button được chọn */
}
Các Tình Huống Sử Dụng
Tinh Chỉnh Giao Diện của Checkbox và Radio Button
Bạn có thể thay đổi màu nền, viền, hoặc nhiều thuộc tính khác khi checkbox hoặc radio button được chọn.
input[type="checkbox"]:checked {
background-color: #4CAF50; /* Màu nền xanh lá cây */
border: 2px solid #4CAF50; /* Viền cũng có màu xanh lá cây */
}
input[type="radio"]:checked {
background-color: #2196F3; /* Màu nền xanh lam */
border: 2px solid #2196F3; /* Viền cũng có màu xanh lam */
}
Liên Kết với Các Phần Tử Khác
Khi một checkbox hoặc radio button được chọn, bạn có thể thay đổi style của các phần tử khác trong tài liệu. Ví dụ, bạn có thể hiển thị hoặc ẩn các phần tử nào đó khi input được chọn hoặc không:
<label for="toggle">Chọn tôi</label>
<input type="checkbox" id="toggle">
<div class="content">Nội dung này sẽ xuất hiện khi checkbox được chọn.</div>
/* Ẩn nội dung theo mặc định */
.content {
display: none;
}
/* Hiển thị nội dung khi checkbox được chọn */
input[type="checkbox"]:checked + .content {
display: block;
}
Tinh Chỉnh Hiệu Ứng Trên Trình Duyệt
Không phải tất cả các trình duyệt đều hỗ trợ tốt cho việc tùy chỉnh trực tiếp các checkbox và radio button. Do đó, bạn có thể cần sử dụng các kỹ thuật bổ sung như thay thế các phần tử này bằng hình ảnh hoặc các phần tử HTML/CSS khác.
<label for="customCheckbox">
<input type="checkbox" id="customCheckbox">
<span class="custom-checkbox"></span>
Chọn tôi
</label>
/* Ẩn input mặc định */
input[type="checkbox"] {
display: none;
}
/* Style cho custom checkbox */
.custom-checkbox {
width: 20px;
height: 20px;
background-color: #eee;
display: inline-block;
}
input[type="checkbox"]:checked + .custom-checkbox {
background-color: #4CAF50;
}
Kết Luận
Việc tùy chỉnh style cho các phần tử điều khiển được chọn bằng pseudo-class :checked giúp bạn làm cho trang web trở nên thân thiện và phù hợp hơn với người dùng. Bằng cách sử dụng pseudo-class này, bạn có thể kiểm soát trải nghiệm của người dùng một cách hiệu quả thông qua CSS, từ việc thay đổi màu sắc, kích thước đến việc hiển thị/ẩn các phần tử khác một cách động.
Comments