CSS组件之多选框（checkbox）样式
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>42度空间-CSS组件之多选框（checkbox）样式</title> <style> .checks { padding: 16px 0; font-size: 24px; } .checks > div { display: inline-block; } input[type='checkbox'] { opacity: 0; float: left; width: 8px; } input[type='checkbox'] + label { margin: 0; clear: none; padding: 5px 0 5px 32px; cursor: pointer; background: url(/u/image/off.png) left center no-repeat; } input[type='checkbox']:checked + label { background-image: url(/u/image/check.png); } </style> </head> <body> <div class="checks"> <div> <input type="checkbox" id="check1" checked> <label for="check1">三十课</label> </div> <div> <input type="checkbox" id="check2"> <label for="check2">思否</label> </div> <div> <input type="checkbox" id="check3"> <label for="check3">掘金</label> </div> </div> </body> </html>
运行结果
三十课
广告
