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

任何帮助将不胜感激

修改

提供小提琴

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

Answer 2

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

更新了小提琴：https://jsfiddle.net/2j0zke2z/2/

Answer 3

这就是你要找的东西，只是改变图像，我默认采取了一些措施：

＆＃13;

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

＆＃13;

<input tabindex="0" id="gwt-uid-3" type="checkbox" value="on">
<label for="gwt-uid-3"><span></span>Run task immediately after finish</label>

＆＃13;

Answer 4

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 5

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

只需删除width，然后根据需要添加padding-left即可。还要在背景图片中加入no-repeat。 Updated fiddle

注意：您可以使用background-size

调整背景图片的大小

<强>段

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 6

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

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>

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

6 个答案: