html修改radio、checkbox樣式 純CSS改寫checkbox樣式，讓複選框看起來更舒服一些
阿新 • • 發佈：2019-02-10
原生的checkbox、radio樣式不好看，試試把以下程式碼進去看看。
<!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; } */ /** * 這兩段效果不一樣的 **/ input[type=radio],input[type=checkbox] { display: inline-block; vertical-align: middle; width: 20px; height: 20px; margin-left: 5px; -webkit-appearance: none; background-color: transparent; border: 0; outline: 0 !important; line-height: 20px; color: #d8d8d8; } input[type=radio]:after { content: ""; display:block; width: 20px; height: 20px; border-radius: 50%; text-align: center; line-height: 14px; font-size: 16px; color: #fff; border: 2px solid #ddd; background-color: #fff; box-sizing:border-box; margin-left: -5px; margin-top: -5px; } input[type=checkbox]:after { content: ""; display:block; width: 20px; height: 20px; text-align: center; line-height: 14px; font-size: 16px; color: #fff; border: 2px solid #ddd; background-color: #fff; box-sizing:border-box; } input[type=checkbox]:checked:after { border: 4px solid #ddd; background-color: #37AF6E; } input[type=radio]:checked:after { content: "L"; transform:matrix(-0.766044,-0.642788,-0.642788,0.766044,0,0); -webkit-transform:matrix(-0.766044,-0.642788,-0.642788,0.766044,0,0); border-color: #37AF6E; background-color: #37AF6E; } </style> </head> <body> <h3>Checkbox</h3> <div class="mycheck"> <input type="checkbox" value="1" id="checkbox1" name="" /> <label for="checkbox1"></label> </div> <h3>radio</h3> <div class="mycheck"> <input type="radio" value="1" id="radio1" name="" /> <label for="radio1"></label> </div> </body> </html>
效果圖:
附件地址:http://hao2013.cn/zb_users/upload/2018/01/checkBox.zip