纯CSS编写的复选框 发表于 2016-08-28 Html Code:1234567891011121314<div class="checked-box"> <label class="demo--label"> <input class="demo--radio" type="checkbox" name="demo-checkbox3"> <span class="demo--checkbox demo--radioInput"></span>新闻资讯 </label> <label class="demo--label"> <input class="demo--radio" type="checkbox" name="demo-checkbox3"> <span class="demo--checkbox demo--radioInput"></span>互联网 </label> <label class="demo--label"> <input class="demo--radio" type="checkbox" name="demo-checkbox3"> <span class="demo--checkbox demo--radioInput"></span>汽车 </label></div> Css Code:1234567891011121314151617181920212223242526272829303132.demo--label{ margin:20px 20px 0 0; display:inline-block;}.demo--radio{ display:none}.demo--radioInput{ background-color: #dcdcdc; border:1px solid rgba(0,0,0,0.15); border-radius:100%; display:inline-block; height: 20px; margin-right:10px; margin-top:-1px; vertical-align:middle; width: 20px; line-height:1}.demo--radio:checked + .demo--radioInput:after{ background-color:#57ad68; border-radius: 100%; content:""; display:inline-block; height: 18px; margin: 0px; width: 18px; background: url(../images/checked.png);}.demo--checkbox.demo--radioInput,.demo--radio:checked + .demo--checkbox.demo--radioInput:after{ border-radius:0;}