Cách tạo kiểu cho các nút radio HTML: Hướng dẫn từng bước

Các nút radio HTML là thành phần chính của các biểu mẫu web, nhưng giao diện mặc định của chúng chưa được như mong muốn. Trong bài đăng blog này, chúng ta sẽ tìm hiểu một trong những phương pháp yêu thích của tôi để tùy chỉnh giao diện của nút radio bằng CSS, tạo ra trải nghiệm trực quan và thân thiện hơn với người dùng.

Hãy bắt đầu bằng cách ẩn các nút radio!

Chúng ta cần bắt đầu bằng cách thừa nhận những hạn chế của kiểu dáng trên nhiều trình duyệt cho các nút radio. Mặc dù thật khó chịu khi chúng ta không thể tạo kiểu trực tiếp cho chúng nhưng chúng ta có thể sử dụng các giải pháp thay thế. Trong ví dụ này, bước đầu tiên là ẩn đầu vào nút radio thực tế. Tôi biết điều này nghe có vẻ kỳ quặc nhưng chúng tôi biết rằng chúng tôi không thể tạo kiểu cho chúng, vì vậy chúng tôi chỉ cần loại chúng ra khỏi phương trình.

Tuy nhiên, việc này phải được thực hiện theo cách dễ tiếp cận, đảm bảo rằng nó vẫn hoạt động tốt cho tất cả người dùng. Điều này có thể đạt được bằng cách sử dụng bộ kiểu sau để ẩn nội dung một cách trực quan trong khi vẫn giữ được khả năng sử dụng của nó:

 input[type="radio"] { border: 0 !important; clip: rect(1px, 1px, 1px, 1px); height: 1px !important; overflow: hidden; padding: 0 !important; position: absolute !important; width: 1px !important; }

Tạo các nút radio tùy chỉnh

Để tạo giao diện tùy chỉnh của nút radio, chúng tôi sẽ tận dụng phần tử giả ::before trên nhãn của mình cùng với một số CSS đơn giản để tạo giao diện mà chúng tôi đang tìm kiếm.

Ví dụ của chúng tôi, HTML trông như thế này:

 <form> <h1>Can We Style HTML Radio Buttons?</h1> <ul> <li> <input type="radio" value="yes" name="option" id="yes" /> <label for="yes">Yes</label> </li> <li> <input type="radio" value="no" name="option" id="no" /> <label for="no">No</label> </li> <li> <input type="radio" value="maybe" name="option" id="maybe" /> <label for="maybe">Maybe</label> </li> </ul> </form>

Để bắt đầu, chúng tôi sẽ thêm các kiểu sau vào thành phần nhãn của mình:

 label { display: inline-flex; align-items: center; }

Điều này sẽ đảm bảo rằng khi chúng ta thêm kiểu nút radio, nó sẽ được căn chỉnh chính xác theo chiều dọc với văn bản nhãn.

Bây giờ, chúng ta sẽ thêm các nút radio mô phỏng bằng cách sử dụng phần tử giả ::before :

 label::before { content: ''; display: block; height: 1.25em; width: 1.25em; border: solid 1px #ccc; border-radius: 50%; margin-right: 0.5em; }

Tại thời điểm này, chúng ta có thứ gì đó bắt đầu giống với danh sách nút radio, nhưng nếu nhấp vào radio, chúng ta sẽ thấy rằng không có gì xảy ra. Mặc dù phần tử giả trông giống như một nút radio nhưng nó thiếu tính tương tác vì chúng ta chưa xử lý trạng thái đã chọn.

Xử lý tương tác và trạng thái

Chúng ta có thể xử lý trạng thái đã kiểm tra bằng lớp giả :checked và bộ chọn anh chị em liền kề trên nhãn của chúng ta:

 input[type="radio"]:checked + label { color: black; }

Đối với dấu chấm bên trong, chúng ta có thể tận dụng gradient xuyên tâm trên phần tử giả của mình:

 input[type="radio"]:checked + label::before { background: radial-gradient(0.75em circle at center, currentColor 50%, transparent 55%); box-shadow: 0 0 1em 0 rgba(10, 150, 255, 0.75); border-color: currentColor; }

Ở đó, bây giờ khi chúng ta nhấp vào những cái này, chúng hoạt động giống như các nút radio gốc. Và chúng ta có thể tăng cường tương tác bằng cách thêm một số hiệu ứng chuyển tiếp:

 label::before { ... transition: border ease-in 150ms, box-shadow ease-in 150ms; }

Chúng ta đừng quên sự tập trung

Để cải thiện khả năng truy cập, chúng tôi cũng sẽ cần giải quyết trạng thái tập trung của các nút radio mô phỏng. Lần này chúng ta sẽ cần sử dụng lớp giả :focus và bộ chọn anh chị em liền kề có nhãn:

 input[type="radio"]:checked + label, input[type="radio"]:focus + label { color: black; } input[type="radio"]:focus + label::before { box-shadow: 0 0 1em 0 rgba(10, 150, 255, 0.75); border-color: currentColor; }

Phần kết luận

Bằng cách làm theo phương pháp này, chúng ta có thể tạo các nút radio tùy chỉnh đầy phong cách và dễ tiếp cận, giúp nâng cao đáng kể trải nghiệm người dùng. Các nút radio tùy chỉnh này không chỉ trông đẹp hơn nút tiêu chuẩn mà còn có thể cung cấp phản hồi và tương tác tốt hơn khi được triển khai đúng cách.

Đây là một ví dụ khá đơn giản, thậm chí có thể trông không thực sự khác nhiều so với các kiểu trình duyệt gốc nhưng điều quan trọng là, với thiết lập này, chúng ta có thể làm bất cứ điều gì mình muốn. Vì vậy, hãy thoải mái thử nghiệm các phong cách và điều chỉnh chúng cho phù hợp với thiết kế dự án của bạn.

Bạn muốn thấy nó hoạt động?

Hãy xem mã demo và các ví dụ về kỹ thuật này trong ví dụ về bút mã bên dưới. Nếu bạn có bất kỳ câu hỏi hoặc suy nghĩ nào, đừng ngần ngại để lại nhận xét.

Hãy nhớ rằng với một chút sáng tạo và một số CSS, bạn có thể biến đổi giao diện của các nút radio HTML để phù hợp với thiết kế của mình trong khi vẫn duy trì khả năng truy cập và khả năng sử dụng!