Pascal Claes Pascal Claes - 8 days ago 6
CSS Question

replace checkbox by icon or background with pure css

I have a form with a checkbox.
I want the checkbox and label to be invisible and replace them with an icon.
I want the icon to have the functionality of the checkbox.

Instead of an icon I'm just using a background now. When I click the background I want the form to change color (by selecting the checkbox).
When I click again the form should return to it's regular color.

On my real form the checkbox applies a filter so I need the checkbox funtionality.

Can't really get any of it to work.

https://jsfiddle.net/rom6qr84/1/



.form-item-edit-how-40 {
display: inline-block;
padding: 20px;
width: 50px;
height: 50px;
background: yellow;
}
.form-item-edit-how-40:active,
.form-item-edit-how-40:hover {
background: red;
}
input:checked {
background: green;
}
input,
label {
//display: none;
//visibility: hidden;

}
label {
background: grey;
width: 50px;
height: 50px;
}

<div class="form-item-edit-how-40">
<input type="checkbox" name="how[]" id="edit-how-40" value="40" data-placeholder="KIES JE TRANSPORT" placeholder="KIES JE TRANSPORT">
<label class="option" for="edit-how-40">Met de bus</label>
</div>




Answer

To get the result you're after, you'll need to change your HTML a little bit. You can't select parents in CSS (yet). And therefore you should use the "next sibling selector" (+). I've hidden the text in the label by putting it into a span. The label changes background color when the input[type="checkbox"] is checked, using the following selector: input:checked + label{}.

.form-item-edit-how-40 {
  display: inline-block;
  padding: 20px;
  background: yellow;
}
.form-item-edit-how-40:active,
.form-item-edit-how-40:hover {
  background: red;
}

input,
label span{
  display: none;
  visibility: hidden;
}
label {
  display: block;
  background: grey;
  width: 50px;
  height: 50px;
}
input:checked + label{
  background: green;
}
<div class="form-item-edit-how-40">
  <input type="checkbox" name="how[]" id="edit-how-40" value="40" data-placeholder="KIES JE TRANSPORT" placeholder="KIES JE TRANSPORT">
  <label class="option" for="edit-how-40">
     <span>Met de bus</span>
  </label>
</div>

Comments