Question

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

我知道我必须在标签背景中添加它，但我不知道如何：

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

这里有代码和CSS。

感谢。

＆＃13;

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

＆＃13;

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等重新创建一个复选框，并为它们提供一个像外观一样的复选框。

另一种选择是使用背景图像/ 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 是不可能的，因为您无法根据其子值（{{1）选择父（label） }}）

如果你稍微调整一下html，那么你可以使用兄弟选择器并仅用CSS实现背景改变:)为此，你需要将你的input:checked元素移到你的标签之上，例如：

input

然后，添加这个CSS：

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

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

带有Font Awesome的复选框改变背景颜色（仅限CSS）

2 个答案: