CODEWITHSUNDEEP
htmlcss
Mukul Kant
Mukul Kant

Reputation: 7122

How to hide label on radio checked using css

I have a checkbox in label tag like this.

<label class="duck duck1">
  <input type="checkbox">
</label>

I want if i click on checkbox, label and checkbox both should be display:none without jquery.

I tried this.

.duck input[type=checkbox]:checked + label.checkbox  {display: none;}

jsfiddle

Upvotes: 2

Views: 2908

Answers (1)

Banana
Banana

Reputation: 7463

unfortunately, as i said before: using css, you can only select an element that comes after the one you clicked, not before and not a parent.

you can work around that however. Have a look at the following code:

if you reconstruct your html to have the label after the checkbox, and add the animated classes to the checkbox as well, to align it with the label:

<div class="main">
    <input type="checkbox" class="duck duck1 cb_1"></input>
    <label class="duck duck1"></label>
</div>

you will be able to select both in the following way:

input[type=checkbox].cb_1:checked,
input[type=checkbox].cb_1:checked + label {
    display: none;
}

here is a fixed Fiddle

(the .cb_1 class is only meant for the z-index to make checkbox appear above the lable, and to avoid other checkboxes on the page hide irrelevant labels)

UPDATE:

another workaround would be to create the label (or duck image sprite) using the :after pseudo selector:

.duck:after{
    content:'';
    width: 50px;
    height: 50px;
    position: absolute; 
}

here is an example with the :after selector: Duck Fiddle

Upvotes: 1

Related Questions