Làm cách nào để áp dụng CSS cho nút radio?
|
Các nút radio là các phần tử trang web cho phép người dùng chọn một trong số các tùy chọn. Chúng rất giống với các hộp kiểm. Sự khác biệt là các hộp kiểm không giới hạn ở một lựa chọn. Với các nút radio, khi người dùng cố gắng chọn nhiều tùy chọn, lựa chọn trước đó sẽ bị bỏ chọn Show
Các nút radio thực tế là nguồn cảm hứng cho thuật ngữ 'nút radio'. Các bộ radio cũ hơn có các nút sẽ bật ra khi nhấn một nút khác Để tìm các nút cụ thể phù hợp với kiểu trang web, CodePen là một nơi tuyệt vời để bắt đầu. Bài viết này được tạo bởi nhóm của chúng tôi đằng sau Cuộc cách mạng thanh trượt, cung cấp các đoạn mã nút radio kiểu dáng mà bạn có thể sử dụng trong các dự án của mình Nút radio CSSDự phòng nhúng CodePen Lựa chọn đầu tiên là một thiết kế cổ điển và đơn giản của Tristan White. Phong cách, phông chữ và màu nền rất đơn giản, nhưng nó có đầy đủ các chức năng cơ bản. Toàn bộ mã sạch có sẵn trong CSS và HTML, nhưng không có trong JS Các nút có sẵn trong ba biến thể. Khi được chọn, nút được tô sáng bằng màu tô Một nút radio kiểu bị vô hiệu hóa cũng được bao gồm. Nó rất nhạy và hoạt động tốt trên mọi kích thước màn hình, từ máy tính để bàn đến thiết bị di động CSS thuần – SVG Radio Selector ButtonsDự phòng nhúng CodePen Kiểu nút radio này do Nikki Pantony chấp bút. Nó có sẵn trong CSS và SVG. JS là không cần thiết Công cụ chọn tam giác quản lý dự ánDự phòng nhúng CodePen Jhey đã xây dựng Bộ chọn Tam giác Quản lý Dự án Trong lần lặp lại này, người dùng có thể chọn hai trong số ba tùy chọn. Nó sẽ đặt lại hoàn toàn nếu người dùng cố gắng chọn tùy chọn thứ ba. Nguyên tắc này có thể mở rộng cho nhiều tùy chọn Nút radio bằng đá cẩm thạch và gỗDự phòng nhúng CodePen Các nút này, của Jon Kantner, sử dụng kiểu dáng khác. Bộ chọn hoạt hình xuất hiện giống như quân cờ Trung Quốc trên bảng gỗ Thiết kế các trang web trực quan hấp dẫn và hiệu suất cao mà không cần viết một dòng mã nàoLàm hài lòng khách hàng của bạn bằng cách tạo các trang web sáng tạo và thúc đẩy phản hồi bắt đầu thiết kế Nút radio CSSDự phòng nhúng CodePen CSS Radio-button ở vị trí thứ 147 là các nút radio CSS. Họ nổi bật nhờ phong cách khác biệt Làm nền, nhà phát triển đã sử dụng thiết kế bảng thẻ để đặt các nút trên. Chức năng của các nút rất đơn giản. Khách truy cập trang web chỉ có thể chọn một nút tại một thời điểm Toàn bộ thiết kế tập trung sự chú ý vào các nút động Mã tránh sử dụng JS và thay vào đó được viết bằng CSS và HTML nâng cao. Do đó, mẫu dễ hiểu và dễ sử dụng hơn Liên kết ở trên hiển thị mã và cung cấp thêm thông tin Nút radio Google DotsDự phòng nhúng CodePen Google Dots Radio Buttons cung cấp bốn cách để tùy chỉnh các nút radio. Người phát triển bộ nút này là Victor Freire Việc lựa chọn một trong các nút được đánh dấu bằng màu trắng thông thường. Nhưng điều làm cho các nút này trở nên đặc biệt là hình ảnh động. Từng phím bấm lên xuống nhịp nhàng Điều này chắc chắn sẽ gây được sự chú ý của du khách. Khi người dùng nhấp vào tùy chọn ưa thích của họ, phần điền vào các nút sẽ hoạt ảnh. Nút đã chọn cũng sẽ ngừng di chuyển Nút radio SCSS3 tùy chỉnh – Vụ nổ phóng xạDự phòng nhúng CodePen Thiết kế và phát triển bởi Sodapop Đây không phải là một nút radio tiêu chuẩn. Thiết kế và hình ảnh động thêm một cái gì đó bổ sung. Nhấp vào liên kết để xem bản demo Hộp kiểm tùy chỉnh/Nút radioDự phòng nhúng CodePen Ngoài một loạt các hộp kiểm CSS, Sam còn cung cấp một bộ các nút radio. Các nút CSS chỉ hoạt động trong Chrome nhưng các nút gốc hoạt động trong các trình duyệt khác Nút radio HTMLDự phòng nhúng CodePen Các nút HTML này, được tạo bởi Saumitra Bose, hoàn thành mục đích cơ bản của chúng. Bằng cách nhấp vào một trong các nút radio, một cửa sổ sẽ mở ra với thông tin bổ sung Công tắc chuyển đổi đáp ứngDự phòng nhúng CodePen Như tên cho thấy, yếu tố này đáp ứng. Điều này cho phép nó hoạt động trên mọi thiết bị hoặc nền tảng Một cách khác trên công tắc radio, được thiết kế bởi Darin. Nó đơn giản nhưng thêm nét sáng tạo cho một trang web Nó hoạt động giống như một công tắc, với hai vị trí. Công tắc hiển thị các lựa chọn khả dụng và điều chỉnh theo độ dài văn bản. Bằng cách chọn một, lựa chọn khác được bỏ chọn Nút radio súng NerfDự phòng nhúng CodePen Điều này thoạt nhìn giống như một trong nhiều tùy chọn nút radio khác hiện có. Nhưng hoạt hình lựa chọn làm cho thiết kế này của Olivia Ng trở nên rất đặc biệt. Nó sẽ làm cho bất kỳ trang web nổi bật ĐÀI PHÁT THANH THẦN KINHDự phòng nhúng CodePen Halvves đã phát triển bộ nút này. Một thay đổi đối với bóng hiển thị tùy chọn đã chọn. Một thiết kế đơn giản và phong cách tát chuyển đổiDự phòng nhúng CodePen Bởi Yariv Fruend. Chuyển đổi tát là một biến thể khác trên nút radio CSS Khi nhấp vào một trong các tùy chọn, màu sắc sẽ thay đổi ngay lập tức. Nó là một giải pháp thay thế phức tạp và sáng tạo hơn so với việc chuyển đổi đơn giản giữa các tùy chọn Tương tự như vậy, hình ảnh động cung cấp một dấu hiệu trực quan về sự thay đổi lựa chọn. Hiệu ứng “slap-and-jump” khiến nó trở nên thú vị và hấp dẫn hơn khi xem. Nó sẽ giữ cho khách truy cập trang web giải trí Chuyển đổi nụ cườiDự phòng nhúng CodePen Một biến thể của nút radio, được thiết kế bởi Cameron Fitzwilliam. Nó nổi bật là khác biệt và thú vị khi nhìn và thú vị khi sử dụng Nó là một chỉ số tâm trạng hoạt hình. Công tắc là một mặt cười trượt sang phía 'vui vẻ' hoặc 'xấu'. Tùy thuộc vào mặt được chọn, hình dạng của mặt cười sẽ thay đổi Khi ở phía 'xấu', nó có màu xám và không vui vẻ. Nhưng khi thanh trượt được di chuyển sang phía 'vui nhộn', màu sẽ chuyển sang màu xanh lam và khuôn mặt bắt đầu cười Để đưa ra phản hồi, nút radio có thể hơi nhàm chán. Nhưng 'máy đo tâm trạng' này khiến mọi thứ trở nên thú vị và hấp dẫn. Kết quả là, bạn sẽ có nhiều khả năng nhận được phản hồi hơn Nút radio bong bóngDự phòng nhúng CodePen Chris Simari đã thêm một số giao diện cho các nút radio. Điều này mang lại cho họ một cái nhìn khác biệt và thú vị hơn Giao diện người dùng // Nút radioDự phòng nhúng CodePen Nút radio giao diện người dùng là một loạt các nút được thêm hoạt ảnh để tạo thêm điểm nhấn. Thiết kế bởi Cosimo Scarpa nhảy đàiDự phòng nhúng CodePen Trong các nút hoạt hình này của Jon Kantner, dấu chấm lựa chọn nhảy từ lựa chọn này sang lựa chọn tiếp theo Khảo sát nút radio tùy chỉnhDự phòng nhúng CodePen Các nút CSS này phù hợp để khảo sát chuyên sâu. Người sáng tạo đằng sau chúng, Tobias Bogliolo, đã tạo ra các nút radio này để tăng tính sáng tạo cho trang web. Thêm những yếu tố này sẽ gây ấn tượng với khách truy cập Nó cho phép hiển thị các câu hỏi khác nhau, với nhiều câu trả lời để lựa chọn. Đây là một lựa chọn tốt cho các cuộc thăm dò, đánh giá và khảo sát. Kiểu dáng của các nút radio tiên tiến và phản hồi nhanh Lựa chọn đài phát thanh. Flexbox & FunDự phòng nhúng CodePen Radio Selects là một công việc đang được tiến hành bởi Adam Clark. Giao diện và giao diện của các nút radio CSS này gợi nhớ đến nhiều trò chơi Vì vậy, ví dụ này hữu ích cho nhà phát triển ứng dụng và trò chơi. Nhiều trang web của công ty cũng sử dụng phong cách này. Khách hàng có thể nhấp vào chúng để cho biết loại dịch vụ mà họ đang tìm kiếm Mỗi hộp cung cấp một sự lựa chọn khác nhau. Khi được chọn, màu của hộp sẽ thay đổi và dấu kiểm sẽ xuất hiện phía trên hộp. Mã cho phép người dùng thay đổi các chi tiết khác nhau và có thể được thêm vào một trang web Thanh trượt chấm nút radioDự phòng nhúng CodePen Brandon McConnell đã tạo thanh trượt phạm vi này. Các đường kết nối các tùy chọn và việc thay đổi lựa chọn sẽ di chuyển dấu chấm chỉ báo. Nó hoạt động tốt để chỉ ra phạm vi Tùy chọn này không sử dụng JS, vì vậy đây là một lựa chọn tốt cho các trang web bị hạn chế về JS Danh sách nút radioDự phòng nhúng CodePen Bên cạnh danh sách các tùy chọn là một thanh trượt. Người dùng điều khiển thanh trượt bằng cách di chuột và nhấp chuột. Biến thể nút radio này được viết bằng CSS3 2 phần tử 1 Radio theo kiểuDự phòng nhúng CodePen Các nút radio được tạo kiểu và hoạt hình đơn giản và không vô nghĩa, của Tobias HarisonDenby. Chỉ được viết bằng HTML và CSS mà không cần JS Nút radio kiểu viên thuốcDự phòng nhúng CodePen Các nút radio có phông chữ lớn, rõ ràng do Havard Brynjulfsen phát triển. Nó chỉ sử dụng CSS (SCSS) và sử dụng các bộ chọn anh chị em và. đã kiểm tra lớp giả Công tắc hoạt hình cho nút radioDự phòng nhúng CodePen Fredrik Jensen đã tạo nút radio CSS động rõ ràng và hấp dẫn này. Thiết kế mang đến cho người dùng nhiều tùy chỉnh Một quả cầu hoạt hình cho biết hộp nào được chọn. Một quả cầu chuyển động và thay đổi màu sắc cho thấy sự thay đổi lựa chọn. Các hiệu ứng hình ảnh đơn giản nhưng dễ chịu và sẽ tạo thêm nét sáng tạo cho bất kỳ trang web nào 2020 chuyển đổiDự phòng nhúng CodePen Aaron Iker cung cấp bộ nút radio của mình. Nó cũng bao gồm các công tắc và bộ hộp kiểm CSS. Nếu cần, các phiên bản đã hủy kích hoạt, được tô màu xám, cũng có sẵn Nút radio tùy chỉnhDự phòng nhúng CodePen Các nút radio này không sử dụng thiết kế hình tròn đầy tiêu chuẩn. Thay vào đó, Dronca Raul đã tạo các nút có thể tùy chỉnh cho biết lựa chọn bằng dấu tích. Chỉ phụ thuộc vào CSS Nút radio hình vuông lớnDự phòng nhúng CodePen Nút radio được tạo kiểu sử dụng các hộp chứa văn bản làm nút. Một sự thay đổi màu sắc và một biểu tượng nhỏ hiển thị lựa chọn đã chọn. Thực hiện bởi Gabriel Ferreira Bộ chọn màu vô tuyếnDự phòng nhúng CodePen Được thiết kế bởi The Bearded Wonder Các nút radio này không cung cấp lựa chọn văn bản cụ thể mà chỉ có một khối màu. Do đó, chúng khác với những cái được thảo luận cho đến nay. Thiết kế này rất hữu ích khi đưa ra các tùy chọn màu sắc. Mã cho các nút này được viết bằng CSS và HTML và không phụ thuộc vào JS. Chúng hoạt động tốt trên mọi thiết bị và dễ sao chép. Sử dụng chúng tiết kiệm rất nhiều thời gian và công sức Kiểm tra liên kết để tìm hiểu thêm về các nút, mã và nhà phát triển Nút chuyển đổi tuyệt vờiDự phòng nhúng CodePen Được tạo bởi Andrew, các nút này là công tắc bật tắt. Nó có tính năng thay đổi lựa chọn hoạt hình. Sự thay đổi về màu sắc và biểu tượng cũng cho biết lựa chọn Tùy chọn CSS thuần túyDự phòng nhúng CodePen Một thiết kế radio ngay lập tức thu hút sự chú ý. Nó sử dụng hộp lớn đầy màu sắc Những thay đổi tinh tế trong bóng cho thấy sự lựa chọn đã chọn. Thiết kế cho phép kích hoạt các cảnh báo cũng xác nhận lựa chọn Aron đã viết Tùy chọn CSS thuần túy Radio BulgyDự phòng nhúng CodePen Liam đã sử dụng JS trong mã của anh ấy cho Bulgy Radios. Các hình ảnh động để thay đổi lựa chọn rất hào nhoáng và công phu Đồ ăn nhẹ?Dự phòng nhúng CodePen Các nút radio được tạo kiểu này rất đơn giản và rõ ràng. Chúng có thể điều khiển bằng chuột hoặc bằng bàn phím Nút radio thạchDự phòng nhúng CodePen Tomasso Poletti đã làm chiếc nút đơn giản và vui nhộn này. Anh ấy chỉ sử dụng Vanilla CSS để viết mã Hoạt hình gợn sóng trên đài phát thanh loại đầu vào và hộp kiểmDự phòng nhúng CodePen Nút radio và hộp kiểm với hình ảnh động gợn sóng, được thực hiện bởi Wilder Taype Radio phẳng – Có/KhôngDự phòng nhúng CodePen Thực hiện bởi Matthew Blode Nút Yes/No tương tự như “Styled Radio Buttons” của Nate Wiley. Như tên cho thấy các nút này phẳng. Các màu của nút $đỏ, $xanh lam và $xanh lá cây có thể điều chỉnh được CSS hoàn toàn. Hộp kiểm tùy chỉnh, nút radio và hộp chọnDự phòng nhúng CodePen Nút radio tùy chỉnh, hộp chọn và hộp kiểm của Kenan Yusuf giải trí. Trình chuyển đổi chủ đề thẻDự phòng nhúng CodePen Được thiết kế bởi Dean Hidri, các nút radio này có chủ đề thẻ tín dụng. Mỗi nút cung cấp sự lựa chọn của một màu khác nhau. Một hình ảnh động hài lòng đi kèm với một sự thay đổi lựa chọn Chuyển đổi đầu vào radio bằng nhãnDự phòng nhúng CodePen Các nút radio chuyển đổi của Andrew Vereshchak sử dụng HTML, CSS và JS. Các nút đơn giản, nhưng ưu điểm bổ sung là có nhiều nút Đôi khi một câu hỏi là không đủ. Tùy chọn này có hai hộp tương tự cạnh nhau Bởi vì vẻ ngoài của chúng đơn giản nên chúng không gây rối mắt. Người xem tập trung vào việc điền vào các ô. Mỗi hộp chứa một tập hợp các tùy chọn mà người dùng có thể chọn, một tùy chọn từ mỗi hộp Các nút radio SVG hoạt hìnhDự phòng nhúng CodePen Các nút radio SVG hoạt hình, của Andrej Sharapov, sử dụng CSS. Một lựa chọn tạo ra các nút được lấp đầy như mong đợi và thay đổi màu sắc rõ ràng Chỉ cần các nút radio rất đơn giảnDự phòng nhúng CodePen Cơ bản nhất của các nút radio trả lời chính xác định nghĩa. Mặc dù cơ bản nhưng chúng cũng hiệu quả nhất. Chúng được thiết kế và phát triển bởi Pamela Dayne Trước khi chọn bất cứ thứ gì, tất cả các nút trông giống nhau. Nhưng sau khi nhấp vào một, một thay đổi hoạt hình xuất hiện. Thay đổi này xảy ra một lần nữa nếu người dùng thay đổi lựa chọn của họ Nhà phát triển đã chọn sử dụng mã HTML và CSS đơn giản và sạch sẽ nhất. Vì vậy, sử dụng nó rất đơn giản. Nó có thể được sao chép và dán vào bất kỳ trang web nào Nút radio lỏng sử dụng SVG và GSAPDự phòng nhúng CodePen Nút hoạt hình SVG này của Ryan LaBar rất đặc biệt và phong cách. Hình ảnh động cũng thanh lịch và hoạt động tốt Sự thay đổi trạng thái của một tùy chọn được hiển thị bằng đồ họa bằng một giọt nước lớn rơi xuống ở giữa nút. Khi bỏ chọn tùy chọn này, nút lấp đầy sẽ bắn tung tóe và phân tán đi Thiết kế này là lý tưởng để giữ cho các nút đơn giản, nhưng hấp dẫn. Người dùng sẽ rất hài lòng và thích thú khi lựa chọn Đầu vào đài phát thanhDự phòng nhúng CodePen Một lựa chọn phong cách và sạch sẽ, của Håvard Brynjulfsen. Nó sử dụng các. đã kiểm tra lớp giả đài ngầmDự phòng nhúng CodePen Một nút radio với chủ đề du hành dưới lòng đất. Thực hiện bởi Mikael Ainalem Nút radio lỏngDự phòng nhúng CodePen Một tập hợp các nút tương tự như Liquid Radio Buttons của Ryan LaBar. Các nút này, của Tamino Martinius, sử dụng hình ảnh động tương tự. Mã ở dạng CSS đơn giản Radio gạch ngangDự phòng nhúng CodePen Một tùy chọn thử nghiệm lấy cảm hứng từ các nút radio. Thiết kế này của Ed Hicks sử dụng gạch ngang hoạt hình của một phần câu Nút radio vật liệuDự phòng nhúng CodePen CODEARMADA là nhà thiết kế đằng sau thiết kế nút radio này. Cả CSS và JS đều được sử dụng để đạt được các hiệu ứng mong muốn Hoạt hình chất lỏng khi thay đổi công tắc là hoàn hảo. Nó hiển thị lựa chọn với một hình cầu mà không bao gồm lựa chọn. Điều này khiến biểu tượng hiển thị Đầu vào HTML đài phát thanhDự phòng nhúng CodePen Các nút radio tạo kiểu được thiết kế bởi Andreas Storm. Lựa chọn được theo sau bởi hoạt ảnh tải của đường viền và điền Chỉ CSS Đầu vào Radio Chọn Khái niệmDự phòng nhúng CodePen Sản xuất bởi web-tiki Ví dụ này cho thấy những gì có thể đạt được với hoạt hình đơn giản. Các nút khác nhau nằm ngang, với một vòng tròn chấm hiển thị lựa chọn hiện tại. Nút trượt hoạt hình nằm trên vùng chọn Nút radio tạo kiểu CSSDự phòng nhúng CodePen Khi di chuột qua một tùy chọn, nó được đánh dấu bằng màu sắc bắt mắt. Angela Velasquez là người lên ý tưởng cho thiết kế cá tính này Nút radio của Google MapsDự phòng nhúng CodePen Được tạo bằng HTML và CSS, có ưu điểm là thời gian tải nhanh. Nó sử dụng các biểu tượng Google Maps để lái xe, đi bộ hoặc đi xe đạp. Vì vậy, chúng hoạt động tốt khi kết hợp với bản đồ tùy chỉnh hoặc trình theo dõi vị trí Khi di chuột qua các biểu tượng, chú giải công cụ sẽ làm rõ hơn ý nghĩa của hình ảnh. Có thể thay thế các hình ảnh đã cho bằng hình ảnh của chính người dùng. Lựa chọn được tô sáng bằng hình cầu hoặc màu khác Hộp kiểm/Radio ưa thích CSS thuần túyDự phòng nhúng CodePen Raúl Barrera đã tạo ra các nút này. Các nút và hộp kiểm ưa thích và linh hoạt. Mã HTML và CSS đơn giản và ngắn gọn Các hộp kiểm ưa thích và các nút radioDự phòng nhúng CodePen Các hộp kiểm và hộp kiểm CSS trông lạ mắt, được tạo bởi Jase. Có thể tùy chỉnh và tạo với phông chữ Awesome Hình thức thanh toánDự phòng nhúng CodePen Rosa đã thiết kế các nút radio kiểu thanh toán này. Ba bộ nút nằm trong liên kết Kiểu nút radioDự phòng nhúng CodePen Các nút radio CSS và HTML được tạo kiểu bởi Morten Olsen Mạch nút radioDự phòng nhúng CodePen LukasOe đã tạo các nút radio HTML và CSS theo chủ đề bộ chọn mạch này. Thiết kế này chắc chắn sẽ thu hút sự chú ý của người xem Hộp kiểm và nút radioDự phòng nhúng CodePen Hộp kiểm chủ đề macOS chế độ tối và các nút radio. Một thiết kế đơn giản, được tạo ra bởi Andreas Storm Nút đầu vào và RadioDự phòng nhúng CodePen Ophelia Fournier-Laflamme đã làm cái này. Thiết kế này sử dụng đường viền hình cầu xung quanh nút để biểu thị lựa chọn. Được tạo bằng HTML và CSS Kết thúc suy nghĩ về việc tạo kiểu cho các nút radio bằng CSSNút radio là thành phần trên nhiều trang web. Việc thấy chúng được sử dụng trên các trang cần hoàn thành biểu mẫu là điều bình thường Người dùng trong những trường hợp này chỉ có thể chọn một tùy chọn trong số nhiều tùy chọn. Nếu họ cố gắng chọn nhiều câu trả lời, lựa chọn đầu tiên sẽ bị hủy Trong quá khứ, các nút radio chỉ là một thứ chức năng. Các nút mặc định hiện được coi là quá nhàm chán và không hấp dẫn lắm Gần đây hơn, các nhà thiết kế đã bắt đầu sử dụng yếu tố này như một thứ có thể thêm phong cách hoặc dấu ấn cá nhân cho trang web. Vì lý do này, kiểu dáng của các nút radio CSS đang trở nên phổ biến hơn Tuy nhiên, một lời cảnh báo. Nút radio nên được sử dụng đúng mục đích Với khả năng nâng cao của CSS, người dùng có thể thấy những gì đã được chọn. Điều này ngăn việc cho và nhận dữ liệu không chính xác Nếu bạn thích bài viết này về cách tạo kiểu nút radio, bạn nên xem bài viết này với các ví dụ về dòng thời gian CSS Chúng tôi cũng đã viết về các chủ đề tương tự như ví dụ về thư viện CSS, đoạn mã lịch HTML, ví dụ về văn bản đầu vào CSS, đàn accordion CSS, nền động CSS và ví dụ về hoạt ảnh CSS Làm cách nào để tạo kiểu cho nút radio bằng CSS?Kiểu nút radio tùy chỉnh . Bước 1. Ẩn đầu vào radio bản địa. #. Bước 2. Các kiểu radio không được chọn tùy chỉnh. #. Bước 3. Cải thiện đầu vào so với. Căn chỉnh nhãn. . Bước 4. Các. trạng thái đã kiểm tra. #. Bước 5. Các. tập trung Nhà nước. # Làm cách nào để tạo nút radio trong HTML và CSS?Để tạo nút radio trong HTML, hãy sử dụng phần tử . Điều này tạo ra một nút radio duy nhất mà người dùng có thể tương tác với. HTML. |
