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.   https://youtu.be/PlldXyuTnUw?embedable=true  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ả   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. ::before  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ả   và bộ chọn anh chị em liền kề trên nhãn của chúng ta: :checked   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ả   và bộ chọn anh chị em liền kề có nhãn: :focus   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!   https://codepen.io/brianmtreese/pen/bGOGeBJ?embedable=true

Buy Me a Coffee

Nghe bài viết này bằng Tiếng Anh, đọc bởi robot thông minh của HackerNoon

dài quá đọc không nổi

Make resilience your competitive advantage

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

About Author

BÌNH LUẬN

chuyên mục

BÀI VIẾT NÀY CŨNG CÓ MẶT TẠI

Related Stories

72 Stories To Learn About Adam Smith

189 Stories To Learn About Reading Books

223 Stories To Learn About Science

128 Stories To Learn About Charles Dickens

72 Stories To Learn About Adam Smith

189 Stories To Learn About Reading Books

223 Stories To Learn About Science

128 Stories To Learn About Charles Dickens

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps