html自定义checkbox样式

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

input[type="checkbox"] {
   /*
  display: none;这样会让tab键无法选取自定义的checkbox，所以使用下面的方法
  clip 属性剪裁绝对定位元素。
  */
  position: absolute;
  clip: rect(0, 0, 0, 0)
}

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

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