<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