html - 自定义复选框未与文本对齐

Question

我正在尝试仅使用 CSS 在 GWT 中创建自定义复选框到目前为止，我能够为附近没有文本的复选框设置样式。但是带有文本的复选框看起来很乱

当前状态:

期望的行为:

  <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

任何帮助将不胜感激

编辑:

提供 fiddle

https://jsfiddle.net/2j0zke2z/

Answer 1

它解决了所有问题:(如果你愿意，你可以设置更高的填充)

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