CSS Custom checkbox with label on wrong side - css

Question

This method of customizing a checkbox is new to me. I can customize, and put a label on it. Now I simply want to move the label to the LEFT of the checkbox. HTML and CSS is below the jsFiddle link. Thanks!
http://jsfiddle.net/q3d8p321/1/
<input type='checkbox' name='thing' value='valuable' id="thing" />
<label for="thing">label</label>
input[type=checkbox] {
display:none;
}
input[type=checkbox] + label {
background: #999;
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
}
input[type=checkbox]:checked + label {
background: #0080FF;
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
}

Answer 1

Try this:
input[type=checkbox] {
display: none;
}
input[type=checkbox] + label {
display: inline-block;
padding: 0 16px 0 0;
min-height: 16px;
background: no-repeat right center / 16px 16px;
background-image: linear-gradient(to top, #999, #999);
}
input[type=checkbox]:checked + label {
background-image: linear-gradient(to top, #0080FF, #0080FF);
}
Demo
Instead of setting a height and width, I set a min-height and a padding-right.
Then I fill that padding:
background-image sets the color.
background-size: 16px 16px sets the size.
background-position: right center places the background in the padding.
background-repeat: no-repeat prevents the background to repeat outside the padding.
It must be background-image instead of background-color in order to make background-size work. Therefore I used linear-gradient, alternative ways could be svg or a data URI containing a 1x1 px image.
When the checkbox is checked, I change the background-image.

Answer 2

Move the label declaration to the 'left' of the checkbox in html, then change the css selectors around as well to label + input[checkbox]...
HTML
<label for="thing">label</label>
<input type='checkbox' name='thing' value='valuable' id="thing" />
CSS
input[type=checkbox] {
display:none;
}
label + input[type=checkbox] {
background: #999;
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
}
label + input[type=checkbox]:checked {
background: #0080FF;
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
}

Answer 3

Try this:
input[type=checkbox] {
display: none;
}
input[type=checkbox] + label:after {
content: '';
display: inline-block;
vertical-align: middle;
height: 16px;
width: 16px;
background-color: #999;
}
input[type=checkbox]:checked + label:after {
background-color: #0080FF;
}
Demo
Basically, instead of converting the label into the customized checkbox, I do that with a pseudo-element.