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

【问题标题】：Checkboxes with Fontawesome change background color (only CSS)带有 Fontawesome 的复选框更改背景颜色（仅 CSS）
【发布时间】：2015-03-23 23:25:35
【问题描述】：

你好，我使用了带有字体真棒图标的复选框。我看起来很棒，但我仍然需要能够更改框的背景（就像它只更改图标和文本一样。

我知道我必须将它与标签背景一起添加到这一行，但我不知道如何：

.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; }

【问题讨论】：

什么盒子？字体很棒的图标在哪里？标签不应有子元素
@atmd labels 生孩子没什么错……这很常见。
抱歉，印象中输入是块级元素，使标记无效（但我想这取决于文档类型以及验证是否重要）
不...inputs 是内联元素 - developer.mozilla.org/en-US/docs/Web/HTML/Inline_elemente
OP...如果选中该复选框，您是否要更改标签背景？如果是这样..that's not possible with CSS

标签： html css twitter-bootstrap checkbox font-awesome

【解决方案1】：

使用一些 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 是不可能的，因为您无法根据子级值 (input:checked) 选择父级 (label)

如果您稍微调整一下 html，那么您可以使用同级选择器并仅使用 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/

【讨论】：

没问题。如果你想要一个 CSS 解决方案，我刚刚添加了它:)

【解决方案2】：

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

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

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

如果您不喜欢推出自己的解决方案，这里有一个 few plugins 可以帮您解决

【讨论】：