[英]Checkbox label not styling when checked
我試圖創建一個復選框標簽,其中復選框本身是隱藏的,但是該標簽因此並未單擊標簽,請選中該復選框,即使未顯示也是如此。
我想要發生的是,當它被選中時,標簽保持紅色,為此我為復選框分配了一個活動類,但它不起作用。 它在懸停時很好,只是不在活動時。 當我單擊它時,復選框會選中,但標簽不會讀取活動的類。
有任何想法嗎?
我使用以下html:
<div class="gl_delete">
<div class="deleteCB">
<input id="uImgId47" type="checkbox" name="uImgId[]" value="47"></input>
<input type="hidden" name="filename[]" value="6_246f0548d62b9b9cc19210389ef09472.jpg"></input>
<label onclick="$('#delHolder').show()" for="uImgId47"> X </label>
</div>
</div>
和以下CSS
.deleteCB {
width: 20px;
margin: 20px auto;
}
.deleteCB label, .deleteCB label:after {
cursor: pointer;
position: absolute;
font-weight:bold;
font-size:14px;
content: 'x';
line-height:14px;
position: absolute;
border-radius:6px;
padding-left:9px;
padding-top:3px;
color:#fff;
width: 17px;
height: 21px;
background: #ccc;
border:1px solid #ccc;
top: -1px;
right: -1px;
padding-bottom:0;
}
.deleteCB label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
color:#fff;
background: #cc3333;
border:1px solid #cc3333;
}
.deleteCB label:hover::after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=100);
opacity: 1;
}
.deleteCB input[type=checkbox]:checked + label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
/* hide checkbox */
input[type=checkbox] {
visibility: hidden;
}
選擇器.deleteCB input[type=checkbox]:checked + label:after
使用相鄰的同級選擇器+
,這意味着它直接在input[type=checkbox]:checked
元素之后選擇標簽。
這不起作用,因為復選框和標簽元素之間還有另一個input
元素-因此您的選擇器實際上是:
.deleteCB input[type=checkbox]:checked + input[type=hidden] + label:after
相反,您還可以使用通用的同級組合器,該組合器選擇出現在以下位置的所有元素:
.deleteCB input[type=checkbox]:checked ~ label:after
以下是有關同級選擇器的更多信息: CSS技巧:子級和同級選擇器
如果我理解正確,我只是建議您通過JavaScript將類添加到您的標簽中,而不是僅依賴CSS。 您的標簽上已經有一個onclick
處理程序,因此建議您創建一個在單擊時調用的函數,該函數處理您已經擁有的show()
方法,並向標簽中添加一個類。
例如,HTML:
<label id="labelImgId47" onclick="onLabelClick()" for="uImgId47">...</label>
...以及JavaScript:
function onLabelClick() {
$('#delHolder').show();
$('#labelImgId47').addClass('active');
}
如果用戶可以打開/關閉復選框,則可以添加條件邏輯以檢查其是否已選中,並在需要將復選框顯示為未選中時使用jQuery removeClass()
函數。
然后在CSS中,您可以僅使用active
類設置標簽樣式:
.deleteCB label.active {
// Your styles here
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.