高效-1自定义radio/checkbox样式

自定义radio/checkbox样式

借助css3的伪类：checked实现

<pre>自定义radio/checkbox样式</pre>
  
  <label for="ck1">
        <input type="checkbox" name="ck" id="ck1">
        <span class="checkbox"> 多选</span>
  </label>
  <label for="ck2">
        <input type="checkbox" name="ck" id="ck2">
        <span class="checkbox"> 多选</span>
  </label>
  <label for="ck3">
        <input type="checkbox" name="ck" id="ck3">
        <span class="checkbox"> 多选</span>
  </label>

  <style>
  input[type=checkbox] {
    display: none;
  }

  .checkbox {
    /*为选中的样式*/
    background: red;
    border: 10px solid gray;
  }

  input[type=checkbox]:checked+.checkbox {
    /*选中后的样式*/
    background: green;
    border: 10px solid gray;
  }

  </style>