选中复选框标签时未设置样式

Question

I am trying to create a check box label where the checkbox itself is hidden but the label isn't therefore clicking on the label, checks the checkbox, even if not shown.

What I want to happen is when it's checked, the label stays red, and for this i assigned a class for checkbox active, but its not working. It works fine on hover just not on active. When I click it the checkbox checks but the label does not read the active class.

Any ideas?

I use the following 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>

And the following 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;
}

Answer 1

The selector .deleteCB input[type=checkbox]:checked + label:after uses an adjacent sibling selector + which means it is picking the label directly after the input[type=checkbox]:checked element

This does not work because there is another input element between the checkbox and label elements - so your selector would actually be:

.deleteCB input[type=checkbox]:checked + input[type=hidden] + label:after

Instead you can also use the general sibling combinator which selects all elements that appear after:

.deleteCB input[type=checkbox]:checked ~ label:after

Here is a little more information about sibling selectors: CSS Tricks: Child and Sibling Selectors

Answer 2

If I'm understanding you right, I'd simply suggest adding a class to your label via JavaScript rather than relying solely on CSS. You've got an onclick handler on your label already, so I'd suggest making a function to call when that's clicked, which handles the show() method you have already, plus adds a class to your label.

For example, the HTML:

<label id="labelImgId47" onclick="onLabelClick()" for="uImgId47">...</label>

...and the JavaScript:

function onLabelClick() {
    $('#delHolder').show();
    $('#labelImgId47').addClass('active');
}

If the user can toggle the checkbox on/off, you can add in conditional logic to check whether its checked or not, and use the jQuery removeClass() function when you need to show the box as unchecked.

Then in your CSS, you can just style your label with active class:

.deleteCB label.active {
    // Your styles here
}