CSS实现input的checkbox的样式

1，label和input的隐式关联

就是label标签把input标签包裹起来就可以了，

HTML

 

 <label>
    <input type="checkbox" name="inp1" id="">
    <span>inp1</span>
 </label>

CSS

<style>
    * {
      margin: 0;
      padding: 0;
    }

    span::before {
      display: block;
      content: "";
      width: 15px;
      height: 15px;
      border: 1px solid black;
      position: absolute;
      top: 3px;
      left: 0;
    }

    span::after {
      display: block;
      content: "";
      height: 10px;
      width: 10px;
      position: absolute;
      top: 6px;
      left: 3px;
    }

    label {
      position: relative;
      padding-left: 15px;
      padding-left: 20px;
    }

    input {
      display: none;
    }

    label input:checked+span::after {
      background: red;
    }

    label input:checked+spa