如何使用纯css自定义checkbox的样式

直接贴代码：

input[type="checkbox"] {
    cursor: pointer;
    height: 15px;
    width: 15px;
    position: relative;
    top: 2px;
  }

  input[type="checkbox"]::before {
    border: 2px solid;
    border-color: #10ac44;
    background-color: #F4F4F4;
    border-radius: 2px;
    content: "";
    display: block;
    height: 15px;
    left: 0;
    position: absolute;
    top: 0;
    width: 15px;
  }

  input[type="checkbox"]:hover::before {
    border: 2px solid;
    border-color: #0af358;
  }

  input[type="checkbox"]:checked::before {
    background-color: #10ac44;
  }

  input[type="checkbox"]:hover:checked::before {
    border: 2px solid;
    border-color: #10ac44;
  }

  input[type="checkbox"]:checked::after {
    border-right-color: #F4F4F4;
    border-bottom-color: #F4F4F4;
    border: solid #F4F4F4;
    border-width: 0 2px 2px 0;
    content: "";
    display: block;
    height: 8px;
    left: 5.5px;
    position: absolute;
    top: 3px;
    transform: rotate(35deg);
    width: 5px;
  }

  <div>
    <input type="checkbox" />
    <label for="handsome">我很帅</label>
  </div>

 

效果图：

1）未勾选：

2）勾选：