純CSS改寫checkbox樣式，讓複選框看起來更舒服一些
阿新 • • 發佈：2019-01-10
系統自帶的checkbox樣式，呵呵
特別是在手機上，得拿放大鏡看，改它！
純CSS的，利用了label，看程式碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link href="../css/bootstrap.css" rel="stylesheet"> <style type="text/css"> .mycheck { width: 25px; margin: 20px 100px; position: relative; } .mycheck input[type=checkbox] { visibility: hidden; } .mycheck label { cursor: pointer; position: absolute; width: 25px; height: 25px; top: 0; left: 0; background: #fff; border:2px solid #ccc; -moz-border-radius: 3px; /* Gecko browsers */ -webkit-border-radius: 3px; /* Webkit browsers */ border-radius:3px; /* W3C syntax */ } .mycheck label:after { opacity: 0; content: ''; position: absolute; width: 9px; height: 5px; background: transparent; top: 6px; left: 6px; border: 2px solid #333; border-top: none; border-right: none; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .mycheck label:hover::after { opacity: 0.5; } .mycheck input[type=checkbox]:checked + label:after { opacity: 1; } </style> </head> <body> <h3>Checkbox</h3> <div class="mycheck"> <input type="checkbox" value="1" id="checkbox1" name="" /> <label for="checkbox1"></label> </div> </body> </html>
如果你有CSS相關基礎的話，還可以做進一步改動，比如顏色，邊線等
同樣可以做出單選框radio來。