带有 Fontawesome 的复选框更改背景颜色（仅 CSS）

Question

您好，我使用了使用超赞字体图标的复选框。我看起来不错，但我仍然需要能够更改框的背景（比如它只更改图标和文本。

我知道我必须在带有标签背景的这一行中添加它，但我不知道如何:

.checkboxes input[type="checkbox"]:checked + i + span,
input[type="checkbox"]:checked + i:before {
  color: #2581BC;
}

这里有代码和CSS。

谢谢。

<div class="row checkboxes">
     <div class="col-lg-8">
       <label for="check-one">
           <input type="checkbox" name="check-one" id="check-one" value="checkone"/>
           <i></i> <span>Checkbox 1</span> 
     </label>
             
      <label for="check-two">
         <input type="checkbox" name="check-two" id="check-two" value="check-two"/>
          <i></i> <span>Checkbox 2</span>
     </label>   
      </div>
  </div>

CSS:


::-moz-selection {
 background: white;
}

::selection { background: white; }



.checkboxes label {
  display: block;
  position: relative;
  padding: 6px 2px 10px 20px;
  line-height: 28px;
  font-weight: normal;
  cursor: pointer;
   border: 1px solid #e6e7e8;
  border-radius:4px;
  background:#f6f6f6;
  margin-top:16px;
  -webkit-tap-highlight-color: transparent;
}



.checkboxes label i {
  display: inline-block;
  height: 28px;
  position: relative;
  top: 6px;
  font-style: normal;
  color: #ccc;

}

.checkboxes label span {
  color: #2c3e50;
  display: unset;
  font-size: 16px;
  line-height: 25px;
  margin-left: 14px;
  min-width: 256px;
}
.checkboxes input[type="radio"],input[type="checkbox"] { display: none; }

.checkboxes input[type="radio"] + i:before, input[type="checkbox"] + i:before {
  font-family: 'FontAwesome';
  font-size: 24px;
  height: 25px;
  width: 25px;
  display: table;
}

.checkboxes input[type="radio"]:checked + i, input[type="checkbox"]:checked + i {
  position: relative;
  -webkit-animation: icon-beat 0.1s ease;
  animation: icon-beat 0.1s ease;
}

.checkboxes input[type="radio"]:checked + i + span, input[type="checkbox"]:checked + i + span {
  -webkit-transition: all 0.1s ease;
  transition: all 0.1s ease;
}

.checkboxes input[type="radio"] + i:before { content: "\f10c"; }

.checkboxes input[type="radio"]:checked + i:before { content: "\f111"; }

.checkboxes input[type="radio"]:checked + i + span + label,input[type="radio"]:checked + i + label:before { color: rgba(245,245, 245); }

.checkboxes input[type="checkbox"] + i:before { content: "\f10c"; }

.checkboxes input[type="checkbox"]:checked + i:before { content: "\f05d"; }

.checkboxes input[type="checkbox"]:checked + i + span,
input[type="checkbox"]:checked + i:before { color: #2581BC; }

Answer 1

遗憾的是，您不能设置这样的复选框样式。

您的选择是使用 div 等重新创建一个复选框，并为它们提供外观类似的复选框。

另一种选择是使用背景 image/svg

这里有 few plugins 如果您不喜欢推出自己的解决方案，可以为您完成

Answer 2

使用一些 jquery 代码，您可以这样实现：

$('input[type="checkbox"]').click(function(){
    var label = $('label[for='+this.id+']');
    if($(this).is(":checked"))
        label.addClass("labelselected");
    else
        label.removeClass("labelselected"); 
});

JsFiddle 演示：http://jsfiddle.net/dhtfyq25/1/

否则，仅 CSS 和 不更改 html 是不可能的，因为您无法 select父项 (label) 根据其子项值 (input:checked)

如果你稍微调整一下 html，那么你可以使用同级 selectors 并只用 CSS 实现背景更改:) 为此，你需要移动您的标签上方的 input 元素，例如：

   <input type="checkbox" name="check-one" id="check-one" value="checkone"/>
   <label for="check-one">
       <i></i> <span>Checkbox 1</span> 
    </label>
     <input type="checkbox" name="check-two" id="check-two" value="check-two"/>
     <label for="check-two">
         <i></i> <span>Checkbox 2</span>
    </label>

然后，添加这个 CSS :

input[type="checkbox"]:checked + label { background: red !important; }

JsFiddle 演示：http://jsfiddle.net/4pxfjvdv/1/

带有 Fontawesome 的复选框更改背景颜色（仅 CSS）

Checkboxes with Fontawesome change background color (only CSS)

html

css

twitter-bootstrap

checkbox

font-awesome