css的checkbox樣式變化

kimingw發表於2017-08-03
CSS

1、CSS

body{font-family:'微軟簡行楷'}
ul li{list-style:none; margin:10px;color:#4985d7;}
.myCheck { display: none;  }
.myCheck + label { background-color: white;  border: 1px solid #d3d3d3;  width: 20px; height: 20px;  display: inline-block;  text-align: center; vertical-align: middle;  line-height: 20px; margin-right: 5px; }
.myCheck:checked + label {  background-color: #eee; }
.myCheck:checked + label:after {  content: "\2714";   }

2、HTML

ul class="cleanfloat">
        <li><input type="checkbox" class="myCheck" checked="checked" id="ck1"><label for="ck1"></label>123</li>
        <li><input type="checkbox" class="myCheck" id="ck2"><label for="ck2"></label>345</li>
        <li><input type="checkbox" class="myCheck" checked="checked" id="ck3"><label for="ck3"></label>123</li>
        <li><input type="checkbox" class="myCheck" id="ck4"><label for="ck4"></label>34-CSDN</li>
        <li><input type="checkbox" class="myCheck" checked="checked" id="ck5"><label for="ck5"></label>123-checkbox</li>
        <li><input type="checkbox" class="myCheck" id="ck6"><label for="ck6"></label>345</li>
 </ul>

　　

相關文章