CSS: How to style checkbox after label? - css

Question

I have this HTML that I can't change:
<label for="accept">I accept.</label>
<input id="accept" type="checkbox">
Now, I have to use the CSS to move the checkbox to the left and style it with a custom image.
What I usually do in CSS, when input goes before label is to make the label act like the checkbox by and hide the actual input:
input[ type=checkbox ] {
display:none;
}
input[ type=checkbox ] + label {
display:inline-block;
padding-left: 25px;
cursor: pointer;
height: 25px;
background: url('image.png') 0 -5px no-repeat;
}
input[ type=checkbox ]:checked + label {
background: url('image.png') 0 -40px no-repeat;
}
However, in this case, when I try:
input[ type=checkbox ] {
display:none;
}
label + input[ type=checkbox ] {
display:inline-block;
padding-left: 25px;
cursor: pointer;
height: 25px;
background: url('image.png') 0 -5px no-repeat;
}
label + input[ type=checkbox ]:checked {
background: url('image.png') 0 -40px no-repeat;
}
not only that it doesn't show the background, but it even unhides the checkbox, so I end up with the default checkbox after the label.
How do I go about doing this without using JavaScript?

Answer 1

It is not possible to target the label element using the CSS siblings selector like you try in the second code sample, since CSS selectors are read from right to left.
What you can do is to use a pseudo-element instead, and hide the input element using absolute positioning:
input {
position: absolute;
left: -999em; /* asuming direction: ltr */
}
input:before {
margin-left: 999em;
float: left;
content: "";
/* styles for visual demo */
height: 25px;
width: 25px;
margin-top: -4px;
background: #ddd;
border: 1px solid #000;
}
input:checked:before {
background: #0f0;
}
label {
display: inline;
padding-left: 35px;
line-height: 27px;
}
Working example on JSFiddle
It is a little tricky to make this work cross-browser since not all browsers allow pseudo-elements in inputs (according to spec, it is correct to not allow it), but it can be done in the browsers which supports it.
Reminder: in cases like this, always try to have the HTML changed first or ask for a compromise for the design (that is, ask if it would be ok to have the checkbox to the right instead of to the left). CSS is quite nasty in the edges, and should not always be the solution just because of the possibility.

Answer 2

You can customize default html check box using css. Please have a look at my fiddle.
Custom Checkbox Sample
.customCheckBoxDiv {
position: relative;
float: left;
}
.customCheckBoxDiv span {
margin-left: 25px;
color: #0066cc;
}
.loginCheckBox {
opacity: 0;
position: absolute;
z-index: 1;
cursor: pointer;
}
.checkLabel {
width: 13px;
height: 13px;
border: 1px solid #00cc00;
background: #fff;
position: absolute;
left: 4px;
top: 3px;
}
.loginCheckBox:checked + label {
border: 1px solid #00cc00 !important;
background: #00cc00 !important;
box-shadow: inset -2px 0px 0px 0px #fff, inset 2px 0px 0px 0px #fff, inset 0px -2px 0px 0px #fff, inset 0px 2px 0px 0px #fff !important;
}
<div class="customCheckBoxDiv">
<input type="checkbox" value="None" class="loginCheckBox" name="check" checked />
<label class="checkLabel"></label> <span>Remember Me</span>
</div>