replace checkbox with image, icon or background and keep functionality

Question

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>

score 0 · Answer 1 · edited May 23 '17 at 11:59

There is no parent selector in CSS. see similar Questions

Change Html Code .Look Like This.

Live Demo Here

Snippet Example

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

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

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

score 0 · Accepted Answer · answered Nov 25 '16 at 11:23

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>

had to make a few extra changes, but got it to work, thx! https://jsfiddle.net/99urq40n/1/ — , Nov 25 '16 at 11:56

score 0 · Answer 3 · answered Nov 25 '16 at 12:22

I used to a label to get what you need and of course for now you can't in css get parent and change background. Regards and successful coding

.form-item-edit-how-40 {
  display: inline-block;
  padding: 20px;
  width: 50px;
  height: 50px;
  /* background: yellow; */
  position:relative;
  
}

.form-item-edit-how-40:active,
.form-item-edit-how-40:hover {
  /* background: red; */
}
 
input,
label {
   /*display: none;
  visibility: hidden; */
} 

input[type="checkbox"] {
  -webkit-appearance: none;
   -moz-appearance:    none;
   appearance:         none;
  position:absolute;
  left:0px;
  top:0px;
  width:100%;
  height:100%;
  z-index:-1;
   outline:none;
   background: yellow;
   margin: 0;
}
 
input:checked {
  background: green;
}
input:checked ~ label .fa:before {
    content: "\f111";
}  

label {
/*     background: #808080; */
    position: absolute;
    top: 50%;
    margin-top: -13px;
    left: 50%;
    margin-left: -13px;
    padding: 3px 6px;
    cursor:pointer;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<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"><i class="fa fa-circle-o" aria-hidden="true"></i></label>
  
</div>

replace checkbox with image, icon or background and keep functionality

3 Answers3