Dưới đây là mã nguồn để tạo checkbox và radio button tùy chỉnh bằng CSS (lưu ý: tiêu đề gốc nói về menu responsive có form đăng nhập nhưng nội dung thực tế là custom checkbox):
Ví dụ
<!DOCTYPE html> <html> <style> .checkboxContainer { display: block; position: relative; padding-left: 35px; margin-bottom: 12px; cursor: pointer; font-size: 22px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .checkboxContainer input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } .checkboxMarked { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #eee; } .checkboxContainer:hover input ~ .checkboxMarked { background-color: rgb(205, 255, 199); } .checkboxContainer input:checked ~ .checkboxMarked { background-color: rgb(5, 170, 32); } .checkboxMarked:after { content: ""; position: absolute; display: none; } .checkboxContainer input:checked ~ .checkboxMarked:after { display: block; } .checkboxContainer .checkboxMarked:after { left: 9px; top: 5px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } </style> <body> <h1>Custom Checkbox Example</h1> <label class="checkboxContainer">Rice <input type="checkbox" checked="checked"> <span class="checkboxMarked"></span> </label> <label class="checkboxContainer">Flour <input type="checkbox"> <span class="checkboxMarked"></span> </label> </body> </html>
Kết quả
Mã này sẽ cho ra kết quả như sau:
