自定义radio和CheckBox

1.自定义CheckBox 

• 采用label的for属性

• 使用伪类：checked

• 效果：

• html代码

    <div>
        <input type="checkbox" name="d" class="check" id="check" checked>
        <label for="check"></label><span>option1</span>
        <input type="checkbox" name="d" class="check" id="check1">
        <label for="check1"></label><span>option2</span>
        <input type="checkbox" name="d" class="check" id="check2">
        <label for="check2"></label><span>option3</span>
    </div>

css代码（样式颜色等可自己设置）

    input[type="checkbox"]+label{
        border:1px solid #d3d3d3;
        border-radius: 5px;
        height: 20px;
        width: 20px;
        line-height: 20px;
        color: #ccc;
        text-align: center;
        vertical-align: middle;
        display: inline-block;
    }
    
    input[type="checkbox"]+label{
        background-color: yellowgreen;
    }
    input[type="checkbox"]:checked+label:after{
        content: '\2714';
        color: #fff;
    }
    span{
        display: inline-block;
        height: 20px;
        line-height: 20px;
        text-align: center;
        vertical-align: middle;
        margin-left: 5px;
    }
    /* 隐藏原有样式（也可以用display：none） */
    input[type="checkbox"]{
        position: absolute;
        clip: rect(0, 0, 0, 0);
    }

2.自定义radio

• 同CheckBox方法相同
• 效果：
• html代码

    <div>
        <input type="radio" name="f" id="radio1" class="check" checked>
        <label for="radio1"></label>option1
        <input type="radio" name="f" id="radio2" class="check">
        <label for="radio2"></label>option2
        <input type="radio" name="f" id="radio3" class="check">
        <label for="radio3"></label>option3
        <input type="radio" name="f" id="radio4" class="check">
        <label for="radio4"></label>option4
    </div>

• css代码

      input[type="radio"]+label{
          border:1px solid #d3d3d3;
          border-radius: 5px;
          height: 20px;
          width: 20px;
          line-height: 20px;
          color: #ccc;
          text-align: center;
          vertical-align: middle;
          display: inline-block;
      }
      
      input[type="radio"]+label{
          background-color: yellowgreen;
      }
      input[type="radio"]:checked+label:after{
          content: '\2714';
          color: #fff;
      }
      span{
          display: inline-block;
          height: 20px;
          line-height: 20px;
          text-align: center;
          vertical-align: middle;
          margin-left: 5px;
      }
  /* 隐藏原有样式（也可以用display：none） */
      input[type="radio"]{
          position: absolute;
          clip: rect(0, 0, 0, 0);
      }