1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>radio与checbox修改默认样式</title> 7 <style> 8 body{font-size: 12px;} 9 /*radio*/ 10 11 .radio-input label { font-weight: normal; } 12 .radio-input label { position: relative; width: 56px; } 13 .radio-input label:nth-child(2) { margin-left: 20px; } 14 .radio-input label:before { content: ""; display: inline-block; width: 14px; height: 14px; border: 1px solid #cfcfcf; border-radius: 50%; vertical-align: middle; margin-right: 5px; } 15 .radio-input input { width: 1px; height: 1px; opacity: 0; } 16 .radio-input input:checked + i { width: 8px; height: 8px; background-color: #5faee3; border-radius: 50%; position: absolute; top: 6px; left: 3px; } 17 @-moz-document url-prefix() { 18 .radio-input label { width: 100px; } 19 #turntable_form3 .radio-input label:nth-child(2) { margin-left: 0; } 20 #turntable_form3 .radio-input input:checked + i { top: 10px; } 21 #turntable_form3 .radio-input label:before { margin-right: -10px; } 22 } 23 24 /*radio*/ 25 26 /*checkbox*/ 27 28 .c input[type="checkbox"] { width: auto; height: auto; opacity: 0; vertical-align: middle; } 29 .c i { display: inline-block; width: 14px; height: 14px; border: 1px solid #cfcfcf; text-align: center; line-height: 14px; margin-left: 8px; left: 0; position: absolute; } 30 .c input[type="checkbox"]:checked + i:before { content: "2713"; display: inline-block; color: #de2230; } 31 .c label { position: relative; padding-left: 18px; margin-bottom: 0; } 32 /*checkbox*/ 33 </style> 34 </head> 35 36 <body> 37 <div class="control-input radio-input"> 38 <label for="yes"> 39 <input type="radio" name="use" id="yes" checked="checked"><i class="inline"></i>启用</label> 40 <label for="no"> 41 <input type="radio" name="use" id="no"><i class="inline"></i>禁用</label> 42 </div> 43 <br><br><br><br><br> 44 <!-- checkbox --> 45 <div class="c"> 46 <label> 47 <input type="checkbox" checked="checked" />全选<i></i> 48 </label> 49 </div> 50 <!-- checkbox --> 51 </body> 52 53 </html>
2.checkbox
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta content="telephone=no" name="format-detection" /> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" /> <title>test</title> <style> label { position: relative; cursor: pointer; } label .input { cursor: pointer; } input:checked+.show-box { background: white; /* 这里取个巧，与下面颜色一样而已*/ } .show-box { position: absolute; top: 1px; left: 1px; width: 16px; height: 16px; border-radius: 2px; background: #ec6337; } .show-box:before { /* 使用了 absolute 所以无所谓是 before 还是 after*/ content: ''; /* 空白内容占位，当做盒模型处理，见下面*/ position: absolute; top: 2px; left: 6px; width: 3px; /* 勾的短边*/ height: 8px; /* 勾的长边*/ border: solid white; /* 勾的颜色*/ border-width: 0 2px 2px 0; /* 勾的宽度*/ transform: rotate(45deg); /* 定制宽高加上旋转可以伪装内部的白色勾*/ } </style> </head> <body> <label> <!-- 注意嵌在 label 里面 记住密码 --> <input type="checkbox" /> <!-- 注意嵌在 label 里面 --> <div class="show-box" /> </label> </body> </html>