Custom checkbox is not aligned with text - html

Question

Im im trying to create custom checkboxes in GWT using only CSS
So far i was able to style checkboxes that DO NOT have text near them.
However checkboxes with text are looking messy
Current state:
Desired behaviour:
<span class="gwt-CheckBox" id="i294">
<input tabindex="0" id="gwt-uid-3" type="checkbox" value="on">
<label for="gwt-uid-3">Run task immediately after finish</label>
</span>
HTML
input[type="checkbox"] {
visibility: hidden;
}
input[type="checkbox"]+label {
display: inline-block;
width: 16px;
height: 16px;
background: url(images/custom_html_elements_sprite.png) 0 0;
}
input[type="checkbox"]:checked+label {
display: inline-block;
width: 16px;
height: 16px;
background: url(images/custom_html_elements_sprite.png) -64px 0;
}
CSS
Any help would be appreciated
EDIT:
fiddle provided
https://jsfiddle.net/2j0zke2z/

Answer 1

It solves all problems: (you can set higher padding if you want)
input[type="checkbox"] {
visibility: hidden;
}
input[type="checkbox"]+label {
display: inline;
width: 16px;
height: 16px;
padding:0 0 0 16px;
background: url(https://cdn2.iconfinder.com/data/icons/aspneticons_v1.0_Nov2006/ok_16x16.gif);
background-repeat: no-repeat;
}
input[type="checkbox"]:checked+label {
display: inline;
width: 16px;
height: 16px;
padding:0 0 0 16px;
background: url(http://orig03.deviantart.net/9b11/f/2008/101/c/5/war_skull_16x16__by_xicidal.gif);
background-repeat: no-repeat;
}

Answer 2

This is what you are looking for, just change images, cus I took some by default:
span {
margin-right: 10px;
}
input[type="checkbox"] +
label span {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGYAAABmCAMAAAAOARRQAAAAUVBMVEX///8zMzMwMDBEREQqKiotLS3s7OwnJydcXFxJSUkkJCRDQ0P19fVhYWGZmZnd3d1VVVWvr684ODjFxcWKiopvb2+7u7t1dXX5+flpaWnW1ta78F6SAAABiElEQVRoge2ay5aDIBBEG3kp+EDxmf//0JkMYJwzZpERe9W1Mwtuym6OiyqAg2rlx8lZdlHWTaNXNZxLzctghCyuUhgrpDDDMqszyjxJkQGxo4Sc5j+QdRtkPkaQHLb1N+XBdUYnSYXmjyPFV9mtBMnKH7xU4vgfLutwmKh2PyvfvUihDbP8kiwzWrxO5Gk+m04/sabt3qz7R+rahiWQ3uImD9GlcP27O/Wx6t7FQRTDz16rKXJ1mcVJUlfGlySn5z2dI0WUp7f2/1Jl9CO/7dRLeJAuq5enOhcciKUGlSbT56YA9Gk6CrwJZpps03+pboId42EM70y0+SkAbTx8hLhnOvtknup03DVwYTTmDgpAmEjhIHwrC3YPhgUTFuIy2HswNq5xwvB7MJwwhCEMYQhDGMIQhjCEIQxhCEMYwhCGMIQhDGEIQxjCEAYPc3ewghQTIYVeSBEeUiCJFK8ihcVI0TdSkI9VS0AqWWBVRrAKMEh1HqxyElbVCqs4Bkg1OMAq9cGdFcUvpGkd5VrzEsoAAAAASUVORK5CYII=');
background-size: 20px;
height: 17px;
width: 17px;
display: inline-block;
vertical-align: middle;
margin-top: -5px;
}
input[type="checkbox"]:checked + label span {
background: transparent;
}
input[type="checkbox"]:checked + label span::before {
content: "";
background-image: url('https://cdn4.iconfinder.com/data/icons/customicondesignoffice2/128/success.png');
background-size: 20px;
height: 17px;
width: 17px;
display: inline-block;
}
input[type="checkbox"] {
display: none;
}
<input tabindex="0" id="gwt-uid-3" type="checkbox" value="on">
<label for="gwt-uid-3"><span></span>Run task immediately after finish</label>

Answer 3

CSS :
input[type="checkbox"]+label {
display: inline-block;
width: auto;
height: 16px;
background: url(images/custom_html_elements_sprite.png) 0 0;
}
input[type="checkbox"]:checked+label {
display: inline-block;
width: auto;
height: 16px;
background: url(images/custom_html_elements_sprite.png) -64px 0;
}
Does you really want width of 16px only, If you keep it auto it will solve your problem.
Please check this fiddle Link provided here.

Answer 4

Text has been wrapped due to specified width.
Just remove the width and add padding-left as necessary. Also include no-repeat to your background image. Updated fiddle
Note: You can resize the background image using background-size
Snippet
input[type="checkbox"] {
visibility: hidden;
}
input[type="checkbox"]+label {
cursor: pointer;
padding-left: 20px;
display: inline-block;
height: 16px;
background: url(https://cdn2.iconfinder.com/data/icons/aspneticons_v1.0_Nov2006/ok_16x16.gif) no-repeat;
}
input[type="checkbox"]:checked+label {
padding-left: 20px;
display: inline-block;
height: 16px;
/* background: transparent; */
background: url(http://orig03.deviantart.net/9b11/f/2008/101/c/5/war_skull_16x16__by_xicidal.gif) no-repeat;
}
<span class="gwt-CheckBox" id="i294">
<input tabindex="0" id="gwt-uid-3" type="checkbox" value="on">
<label for="gwt-uid-3">Run task immediately after finish</label>
</span>

Answer 5

Add Padding-left:20px to your label and remove the width and height form label. Also include no-repeat to your background image.
input[type="checkbox"]+label {
display: inline-block;
background: url(images/custom_html_elements_sprite.png) 0 0 no-repeat;
padding-left:20px;
}
input[type="checkbox"]:checked+label {
display: inline-block;
background: url(images/custom_html_elements_sprite.png) -64px 0 no-repeat;
}
Updated fiddle : https://jsfiddle.net/2j0zke2z/2/

Answer 6

Edited :
is this you want?
input[type="checkbox"] {
visibility: hidden;
}
input[type="checkbox"]+label {
display: inline-block;
background: url(https://cdn2.iconfinder.com/data/icons/aspneticons_v1.0_Nov2006/ok_16x16.gif) 0 0;
background-repeat:no-repeat;
padding-left:25px;
}
input[type="checkbox"]:checked+label {
display: inline-block;
background: url(http://orig03.deviantart.net/9b11/f/2008/101/c/5/war_skull_16x16__by_xicidal.gif) 0px 0px;
background-repeat:no-repeat;
padding-left:25px;
}
<span class="gwt-CheckBox" id="i294">
<input tabindex="0" id="gwt-uid-3" type="checkbox" value="on">
<label for="gwt-uid-3">Run task immediately after finish</label>
</span>