javascript - 使用 CSS 填充选中的复选框

Question

是否可以在选中时用背景色填充复选框？还要禁用“滴答声”本身。

我如何实现这一点？我应该为此查看 jQuery/Javascript 吗？

fiddle 演示:http://jsfiddle.net/119a7e8r/

li.squaredTwo li label {
  display:none
}

input[type=checkbox]:checked {
  background:red
}

<ul>

  <li id='field_1_20' class='gfield squaredTwo field_sublabel_below field_description_below' >
  
  <label class='gfield_label'  >Is it free</label>
  
  <div class='ginput_container ginput_container_checkbox'>
    
    <ul class='gfield_checkbox' id='input_1_20'>
  
      <li class='gchoice_1_20_1'>
        <input name='input_20.1' type='checkbox'  value='Yes'  id='choice_1_20_1' tabindex='35'  />
        <label for='choice_1_20_1' id='label_1_20_1'>Yes</label>

      </li>
      
    </ul>
    
  </div>
  
  </li>

</ul>
    

Answer 1

这是一个用于自定义复选框的漂亮的纯 CSS 解决方案:

/* hide the default checkbox */
.checkbox {
  display: none;
}

.label {
  cursor: pointer;
}
/* add pseudo-element as fake checkbox before the label */
.checkbox + .label:before {
  width: 10px;
  height: 10px;
  border: 2px solid gray;
  border-radius: 2px;
  box-shadow: -1px 1px 2px 2px rgba(0,0,0,0.2);
  background: red;
  position: relative;
  display: inline-block;
  margin-right: 1ex;
  content: "";
}

/* style the pseudo element for checked box */
.checkbox:checked + .label:before {
  background: green;
}

<input type="checkbox" class="checkbox" id="myinput" />
<label class="label" for="myinput">Click me</label>