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>

　　

轉載于:https://www.cnblogs.com/huangqiming/p/7280849.html

總結

以上是生活随笔為你收集整理的css的checkbox样式变化的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。