Re-styling a checkbox in bootstrap 3 - css

Question

I'm having a real difficult time trying to style a checkbox in bootstrap, I currently have the default checkbox, and I need to style it to look like this
I'm aware this picture it's round but the designer made a mistake, so instead of being round it still needs to be square
I have looked at the following and also tried what is suggested.
Twitter Bootstrap radio/checkbox
I did on the other hand find a website which has a similar to style to what i'm trying to achieve which is on here located on the left hand side where you do the filtering
Example of the checkbox
I tried using firebug to get/check out the CSS but I was unable to obtain the CSS.

Answer 1

So if you don't need support for IE8 you can easily do this with a background image and the :checked selector in CSS only. I used an svg image, but you could use a font, sprite or just two images.
#import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css";
body {
background-color:#f5e1c6;
}
.image-checkbox {
position: absolute;
left: 100%;
visibility: hidden;
}
.image-checkbox-label {
height: 50px;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 96 84" enable-background="new 0 0 96 84" xml:space="preserve"><path fill="rgb(213,195,170)" d="M74.2,73.5H19.5c-2.8,0-5.1-2.3-5.1-5.1V15.6c0-2.8,2.3-5.1,5.1-5.1h54.7c2.8,0,5.1,2.3,5.1,5.1 v52.7C79.3,71.2,77,73.5,74.2,73.5z"/></svg>') no-repeat;
color: #7b7163;
}
.image-checkbox:checked + .image-checkbox-label {
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 96 84" enable-background="new 0 0 96 84" xml:space="preserve"><path fill="rgb(213,195,170)" d="M74.2,73.5H19.5c-2.8,0-5.1-2.3-5.1-5.1V15.6c0-2.8,2.3-5.1,5.1-5.1h54.7c2.8,0,5.1,2.3,5.1,5.1 v52.7C79.3,71.2,77,73.5,74.2,73.5z"/><polygon id="check" fill="rgb(251,253,223)" points="30.2,31.8 30.2,43 46.1,54 80.1,19.1 80.1,6.1 46.4,44.7 "/></svg>') no-repeat;
color: #c3b39c;
}
.checkbox label {
padding-left: 60px;
line-height: 50px;
font-weight: bold;
font-size: 2em;
}
<div class="container">
<div class="row">
<div class="col-xs-12">
<form>
<div class="form">
<div class="checkbox">
<input id="remember-me" type="checkbox" class="image-checkbox" />
<label for="remember-me" class="image-checkbox-label">
Remember Me
</label>
</div>
</div>
</form>
</div>
</div>
</div>
How it Works
Give the input an id so that you can use the for attribute on the label. Don't forget to make your ids unique. Give the input a class (I used .image-checkbox), and position the input so that it's hidden offscreen but still displayed.
Style your label using the background-image for the unchecked box style. Using the :checked pseudo selector and the sibling selector (+), you can target how the label should be styled when the input is selected. In this case, I changed the background image to the checked image and changed the font color.
To get the actual label text to align nicely, I'm also overriding some of the default Bootstrap styles for .checkbox label. You can adjust them to suit your needs.