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

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

将 Padding-left:20px 添加到您的标签并删除 width 和 height 表单标签。同时将 no-repeat 添加到您的背景图片中。

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

已更新 fiddle：https://jsfiddle.net/2j0zke2z/2/

Answer 2

已编辑： 这是你想要的吗？

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>

Answer 3

它解决了所有问题：（如果你愿意，你可以设置更高的填充）

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 4

这就是你要找的，换个图就好了，因为我默认拍了一些：

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 5

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

你真的只想要 16px 的宽度吗，如果你保持自动它会解决你的问题。

请检查此处提供的fiddle Link。

Answer 6

由于指定的 width，文本已换行。

只需删除 width 并根据需要添加 padding-left。还要将 no-repeat 添加到您的背景图片中。 Updated fiddle

注意： 您可以使用 background-size

调整背景图片的大小

片段

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>

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

Custom checkbox is not aligned with text

html

css

checkbox

gwt