html - 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

使用一些 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 是不可能的，因为您无法根据其子值选择父级(标签)( 输入:选中)

如果你稍微调整一下 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/