Kris Kris - 4 months ago 9
CSS Question

Hiding checkbox with CSS

I am new to html and css and i am working on a project where i want to use custom check boxes.
I am trying to hide a check-box with an image via css. I dont want to re-write the html if i dont have to. Ive got my image to cover the check box using (display:none; )but this has also disabled my check box. Is there a way to make my check-box usable without displaying?

input[type='checkbox']
{
display: none;
}

input[type='checkbox'] + label
{
background: url('/Pictures/checkbox_unchecked.jpg')no-repeat;
height: 30px;
width: 30px;
background-size: 100%;
display:inline-block;
padding: 0 0 0 0px;
}

input[type='checkbox']:checked + label
{
background: url('Pictures/checkbox_checked.jpg') no-repeat;
height: 50px;
width: 200px;
background-size: 100%;
display:inline-block;
padding: 0 0 0 0px;
}

Answer

You can set the opacity of the checkbox to 0. This still makes it clickable.

Example (click inside the black rectangle):

#checkbox {
  opacity: 0;
}
#container {
  border: 2px solid black;
  width: 20px;;
}
<div id="container">
  <input type="checkbox" id="checkbox" onclick="alert('hello')"/>
</div>

Comments