There’s a quite easy way you can do this via <label>
tags. Just place a label around the checkbox, and insert a dummy element that will be used for the custom styled checkbox. For example:
label.checkbox input[type="checkbox"] {display:none;}
label.checkbox span {
display:inline-block;
border:2px solid #BBB;
border-radius:10px;
width:25px;
height:25px;
background:#C33;
vertical-align:middle;
margin:3px;
position: relative;
transition:width 0.1s, height 0.1s, margin 0.1s;
}
label.checkbox :checked + span {
background:#6F6;
width:27px;
height:27px;
margin: 2px;
}
label.checkbox :checked + span:after {
content: '\2714';
font-size: 20px;
position: absolute;
top: -2px;
left: 5px;
color: #99a1a7;
}
<label class="checkbox">
<input type="checkbox"/>
<span></span>
I like cake
</label>
EDIT: Note that some choices of colours might render the state of your checkbox invisible for colourblind people. When making this code I didn’t think of that, but the above demo might be invisible for R/G colourblind people. When implementing this, please do keep that in mind (pick bright/dark colours for example, or show some difference in shape)
The styles I used are just arbitrary, and you can change that to anything you want. You can even toggle certain text inside it via the ::before
pseudo-element, such as what I’ve done here.
I wasn’t able to open the image url you provided to use in your question, but I think you’ll be able to include whatever image you want by simply modifying this code a little. Just change the current background
color to the image URL you want to use.
Note: This won’t work in some older browsers.