<span class="heading-filter">
Cashback
<input class="cashback_check" value="1" type="checkbox">
<label class="label-text"></label>
</span>
我需要复选框和跨度的颜色变化也。复选框背景变化检查
<span class="heading-filter">
Cashback
<input class="cashback_check" value="1" type="checkbox">
<label class="label-text"></label>
</span>
我需要复选框和跨度的颜色变化也。复选框背景变化检查
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;}
\t input[type="checkbox"].cashback_check:checked + .label-text::after {
\t content: "ok";
\t font-family: "FontAwesome";
\t left:72px;
\t position: absolute;
color:red;
top: 0px;
\t }
\t .heading-filter::after {
\t border: 1px solid #000;
\t content: "";
\t display: inline-block;
\t height: 18px;
\t width: 18px;
\t }
\t 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>
我就与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>
好吧,我知道了,但在我的现金返还文本是复选框 – Lekhraj
我编辑我的代码,因为你想请检查 –
检查时,该解决方案将增加的背景下,并取消您的复选框时将其删除。尝试一下!
jQuery(document).on('click', '.cashback_check', function() {
if (this.checked) {
$(this).closest('span').addClass('checked');
$(this).addClass('checked');
}
else {
\t \t $(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/
.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>
谢谢你的解决方案,但需要文本和颜色变化复选框后。我解决了它 – Lekhraj
你有jQuery的,或仅纯JavaScript? – Meloman