Hiding checkbox with CSS - html

Question

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 1

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>

Answer 2

label input {
opacity: 0;
width: 0;
height: 0;
overflow: hidden;
margin: 0;
padding: 0;
}
label span.y {
display: none;
}
label span.n {
display: inline;
}
label input:checked ~span.y {
display: inline;
}
label input:checked ~span.n {
display: none;
}
<label>
<input type="checkbox" value="1">
<span class="y">Checked!</span>
<span class="n">Click me!</span>
</label>
Just change span.y and span.n. to your elements (images or something else).

Answer 3

input[type='checkbox'] {
display: block;
height: 0;
width: 0;
opacity: 0;
overflow: hidden;
}
input[type='checkbox'] + label {
background: url('http://lorempixel.com/30/30/') no-repeat;
height: 30px;
width: 30px;
background-size: cover;
display: inline-block;
}
input[type='checkbox']:checked + label {
background: url('http://lorempixel.com/50/200/') no-repeat;
height: 50px;
width: 200px;
background-size: cover;
display: inline-block;
}
<input type="checkbox" id="check" />
<label for="check"></label>