html - Custom checkbox is not aligned with text -


im im trying create custom checkboxes in gwt using css far able style checkboxes not have text near them. checkboxes text 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 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 appreciated

edit:

fiddle provided

https://jsfiddle.net/2j0zke2z/

it solves problems: (you can set higher padding if 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; } 

Comments

Popular posts from this blog

sql - invalid in the select list because it is not contained in either an aggregate function -

Angularjs unit testing - ng-disabled not working when adding text to textarea -

How to start daemon on android by adb -