Ziker Ziker - 5 months ago 25
HTML Question

Custom checkbox is not aligned with text

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:
Messy style

Desired behaviour:
Right 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

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;
}