Rumah > Artikel > hujung hadapan web > CSS input checkbox自定义样式
代码如下,如有不懂的请加QQ群:126246777
<code> <title>CSS input checkbox自定义样式</title> <style type="text/css"> .compare_button .checkboxcss { cursor: pointer; position: absolute; width: 15px; height: 15px; top: 0; left: 0; background: #f7f7f7; border: 2px solid #f5b34f; border-radius: 5px; } .compare_button { position: relative; } .compare_button .checkboxcss:after { opacity: 0; content: ''; position: absolute; width: 7px; height: 3px; background: transparent; top: 3px; left: 3px; border: 3px solid #1e8cc5; 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); } .compare_button input[type=checkbox]:checked + label:after { opacity: 1; } </style> <div class="compare_button"> <input type="checkbox" id="compare_39680" class="checkbox-input"> <label class="checkboxcss" for="compare_39680"></label> <span>compare text</span> </div> </code>
效果图: