用 CSS 填充选择框答案

【问题标题】：Fill checkbox on selection with CSS用 CSS 填充选择框
【发布时间】：2016-03-21 14:39:12
【问题描述】：

选中时是否可以用背景颜色填充复选框？还可以禁用“tick”本身。

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

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>

【问题讨论】：

你可能想看看这个问题：stackoverflow.com/questions/19145504/…
可能最简单的方法是嵌入一张图片（或制作一张来自divs 的图片）并在css中选择带有:checked+.cstm-chk的图片，同时隐藏复选框本身并将任何点击事件发送到复选框。除非您的目标浏览器包含古代遗物，否则不需要 jQ，并且 js 只是触发 this.previousElementSibling.click(); 的 onclick 属性

标签： javascript jquery html css

【解决方案1】：

我认为您应该为此研究 jQuery。以下是otherstackoverflow 问题的一些示例，jsfiddle

hope this helps!

【讨论】：

对不起。我想将复选框的背景颜色设置为红色并删除勾号。这可能吗？

【解决方案2】：

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

.hideme {
  display: none;
}

.woo {
  cursor: pointer;
}

.hideme + .woo: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: "";
}

.hideme:checked + .woo:before {
  background: green;
}

&lt;input type="checkbox" class="hideme" id="myinput" /&gt;&lt;label class="woo" for="myinput"&gt;Click me&lt;/label&gt;

【讨论】：

完美！通过一些工作，这对我有用：jsfiddle.net/119a7e8r/2 谢谢！！！

【解决方案3】：

我对纯 CSS 的出发点是这样的：

HTML

<input type="checkbox">Hello</input>

CSS

input[type=checkbox] {
  width: 20px;
  height: 20px;
  margin-right: 5px;
  vertical-align: bottom;
}

input[type=checkbox]:after {
  content: "";
  border-bottom: 10px solid red;
  border-top: 10px solid red;
  display: block;
  opacity: 1;
}

input[type=checkbox]:checked:after {
  border-bottom: 10px solid blue;
  border-top: 10px solid blue;
}

演示：http://codepen.io/newanalog/pen/LppBgv

尝试调整不透明度和大小。

【讨论】：