radio checkbox 修改默认样式
Posted Doduo
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了radio checkbox 修改默认样式相关的知识，希望对你有一定的参考价值。
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>
以上是关于radio checkbox 修改默认样式的主要内容，如果未能解决你的问题，请参考以下文章