Question

<span class="heading-filter">
    Cashback 
    <input class="cashback_check" value="1" type="checkbox">
    <label class="label-text"></label>
</span>

我还需要复选框和跨度的颜色更改。

Answer 1

span.heading-filter{position:relative;}
input[type="checkbox"].cashback_check:checked + .label_txt::after {
content: "";
font-family: "FontAwesome";
left: 99px;
position: absolute;
top: 5px;
}
.heading-filter::after {
border: 1px solid;
content: "";
display: inline-block;
height: 18px;
width: 18px;
}
input.cashback_check{opacity:0;z-index:3;position:absolute;top:6px;left: 10px;height:30px; width:90%;}

span.heading-filter{position:relative;}
	input[type="checkbox"].cashback_check:checked + .label-text::after {
	content: "ok";
	font-family: "FontAwesome";
	left:72px;
	position: absolute;
  color:red;
   top: 0px;
	}
	.heading-filter::after {
	border: 1px solid #000;
	content: "";
	display: inline-block;
	height: 18px;
	width: 18px;
	}
	input.cashback_check{opacity:0;z-index:3;position:absolute;top:0px;left: 10px;height:30px; width:90%;}
  input[type="checkbox"].cashback_check:checked span{background:#ccc;display:block}

 <span class="heading-filter">Cashback <input class="cashback_check" value="1" type="checkbox"><label class="label-text"></label></span>

Answer 2

我只使用css制作自定义复选框，请检查。

input[type="checkbox"] + label::before {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  bottom: 0;
  content: "";
  height: 15px;
  left: auto;
  margin: auto;
  position: absolute;
  top: 0;
  width: 15px;
  right:0;
}
input[type="checkbox"]:checked + label::before {
  background: #ccc;
}
input[type="checkbox"]:checked + label{
  color:orange;
}
input[type="checkbox"] + label {
  padding-right: 20px;
  position: relative;
}
input[type="checkbox"] {
  opacity: 0;
  position: absolute;
  right:0;
}
span.heading-filter {
  position: relative;
}

<span class="heading-filter"> <input id="check" class="cashback_check" 
value="1" type="checkbox"><label for="check" class="label-text">Cashback</label></span>

Answer 3

此解决方案将在选中时添加背景，并在取消选中您的复选框时将其删除。试试吧！

jQuery(document).on('click', '.cashback_check', function() {
    if (this.checked) {
        $(this).closest('span').addClass('checked');
        $(this).addClass('checked');
    }
    else {
		$(this).closest('span').removeClass('checked');
        $(this).removeClass('checked');
    }
});

.checked {
    background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="heading-filter">
    Cashback 
    <input class="cashback_check" value="1" type="checkbox">
    <label class="label-text"></label>
</span>

我的小提琴：https://jsfiddle.net/eqomzkg5/

Answer 4

.heading-filter .label-text::before {
  background:#16a085;
  content: "";
  display: inline-block;
  height: 20px;
  left: 134px;
  position: absolute;
  top:3px;
  width: 20px;
}
.heading-filter .label-text{display:block;padding:4px;font-weight:normal;}
input[type="checkbox"].cashback_check:checked + .label-text{background: #428bca none repeat scroll 0 0;
    color: #fff;width:100%;}
span.heading-filter{position:relative;}
input[type="checkbox"].cashback_check:checked + .label-text::after {
    content: "";
    font-family: "FontAwesome";
    left: 136px;
    position: absolute;top:3px;font-size:16px;
 
}
input[type="checkbox"].cashback_check:checked .heading-filter .label-text::before{background:#16a085}
.cashback_check {
  height: 30px;
  left: 124px;
  position:absolute;
  
  z-index: 2;display:block;width:30px;opacity:0;
  }

<span class="heading-filter"><input class="cashback_check" value="1" type="checkbox"><label class="label-text">Cashback </label></span>

选中复选框背景更改

4 个答案: