:checked trong CSS - Kiểm Soát Trạng Thái Input Với CSS!

Bạn muốn tạo hiệu ứng tương tác dựa trên trạng thái chọn của checkbox hoặc radio button trong CSS? Hãy khám phá sức mạnh của selector :checked để làm điều đó một cách dễ dàng và hiệu quả. Bài viết này sẽ hướng dẫn bạn cách sử dụng :checked để tạo ra những trải nghiệm người dùng ấn tượng.

Tìm hiểu thêm về những điều cơ bản của CSS để có nền tảng vững chắc hơn.

:checked trong CSS là gì?

Selector :checked trong CSS được sử dụng để chọn các phần tử input như checkbox hoặc radio button khi chúng đang ở trạng thái được chọn (checked). Nó cho phép bạn áp dụng các kiểu dáng (style) khác nhau cho các phần tử này dựa trên trạng thái của chúng. Điều này mở ra nhiều khả năng để tạo ra các hiệu ứng tương tác và phản hồi trực quan cho người dùng.

Cú pháp của :checked

Cú pháp sử dụng selector :checked rất đơn giản:

input:checked { /* Các thuộc tính CSS */ }

Trong đó, input là phần tử HTML mà bạn muốn chọn (ví dụ: input[type="checkbox"] hoặc input[type="radio"] ). Các thuộc tính CSS bên trong dấu ngoặc nhọn sẽ chỉ được áp dụng khi phần tử input đó đang ở trạng thái được chọn.

Ứng dụng thực tế của :checked

Selector :checked có rất nhiều ứng dụng thực tế trong thiết kế web. Dưới đây là một vài ví dụ:

1. Tạo hiệu ứng khi checkbox được chọn

Bạn có thể thay đổi màu nền, màu chữ, hoặc thêm hiệu ứng bóng đổ khi một checkbox được chọn. Điều này giúp người dùng dễ dàng nhận biết trạng thái của checkbox.

input[type="checkbox"]:checked + label { background-color: #4CAF50; color: white; padding: 5px 10px; border-radius: 5px; }

Trong ví dụ trên, khi checkbox được chọn, màu nền của label đi kèm sẽ chuyển sang màu xanh lá cây và màu chữ sẽ chuyển sang màu trắng.

2. Ẩn/hiện nội dung dựa trên trạng thái checkbox

Bạn có thể sử dụng :checked kết hợp với thuộc tính display để ẩn hoặc hiện một phần tử HTML khác dựa trên trạng thái của checkbox.

#thong-tin-them { display: none; } input[type="checkbox"]:checked ~ #thong-tin-them { display: block; }

Trong ví dụ này, phần tử có id thong-tin-them sẽ bị ẩn cho đến khi checkbox được chọn. Khi checkbox được chọn, phần tử này sẽ hiển thị.

3. Tạo menu điều hướng ẩn/hiện

Bạn có thể sử dụng :checked để tạo một menu điều hướng ẩn/hiện trên các thiết bị di động. Khi người dùng chọn checkbox (thường được ẩn và kích hoạt bằng một biểu tượng menu), menu sẽ hiển thị.

#menu-toggle { display: none; } #menu { display: none; } #menu-toggle:checked ~ #menu { display: block; }

Trong ví dụ này, checkbox có id menu-toggle được sử dụng để kiểm soát hiển thị của menu có id menu .

Lưu ý khi sử dụng :checked

Khi sử dụng selector :checked , bạn cần lưu ý một vài điều sau:

• :checked chỉ hoạt động với các phần tử input có thuộc tính type="checkbox" hoặc type="radio" .
• Bạn cần sử dụng các selector kết hợp (ví dụ: + , ~ ) để chọn các phần tử HTML khác dựa trên trạng thái của checkbox.
• Đảm bảo rằng cấu trúc HTML của bạn hợp lý để các selector kết hợp hoạt động chính xác.

Ví dụ hoàn chỉnh

Dưới đây là một ví dụ hoàn chỉnh về cách sử dụng :checked để tạo hiệu ứng khi checkbox được chọn:

<label for="myCheckbox"> <input type="checkbox" id="myCheckbox"> Chọn tôi! </label> <style> input[type="checkbox"] { display: none; /* Ẩn checkbox mặc định */ } label { border: 1px solid #ccc; padding: 10px; cursor: pointer; } input[type="checkbox"]:checked + label { background-color: #2196F3; color: white; } </style>

Trong ví dụ này, checkbox mặc định được ẩn đi và một label được sử dụng để hiển thị trạng thái của checkbox. Khi người dùng nhấp vào label, checkbox sẽ được chọn và màu nền của label sẽ thay đổi.