1.原理

就是將瀏覽器原生checkbox隱藏，對(duì)label進(jìn)行相關(guān)操作。因?yàn)閘abel和checkbox時(shí)綁在一起的，所以點(diǎn)擊label就會(huì)選中

2.實(shí)現(xiàn)效果

演示地址：https://klren0312.github.io/HTMLStu/%E8%87%AA%E5%AE%9A%E4%B9%89checkbox/checkbox.html

圖片.png

3.代碼

提供一種

圖片.png

1.html代碼

原生的checkbox和對(duì)應(yīng)的label，注意lable的for要與checkbox的id對(duì)應(yīng)

<input type="checkbox" value="markcheckbox1" id="markcheckbox1">
<label class="mark" for="markcheckbox1">markcheckbox1</label>

2.css代碼

1）將原生的checkbox隱藏

input[type="checkbox"] {
   /*
  display: none;這樣會(huì)讓tab鍵無法選取自定義的checkbox，所以使用下面的方法
  clip 屬性剪裁絕對(duì)定位元素。
  */
  position: absolute;
  clip: rect(0, 0, 0, 0)
}

2）設(shè)置checkbox樣式
.mark是label的class，所以::before就是設(shè)置label前面的樣式

.mark::before {  
    content: '\a0';
    display: inline-block;
    border: 1px solid silver;
    text-align: center;
    width: 20px;
    height: 20px;
    font-weight: bold;
}

3）設(shè)置check選中后的樣式

input[type="checkbox"]:checked+.mark::before {
    content: '\2713';
    color: #FA8E53;
}