Html自定义复选框和标签

Question

标签位于复选框的顶部。如何解决这个问题？

HTML：

<input type='checkbox' name='thing' value='valuable' id="thing"/>
<label  for="thing">Description</label>

CSS：

input[type=checkbox] {
    display:none;
}
input[type=checkbox] + label {
    background-image:url(uncheck.png);
    height: 20px;
    width: 20px;
    display:block;
    padding: 0 0 0 0px;
}
input[type=checkbox]:checked +label {
    background-image: url(checked.png);
    background-repeat:no-repeat height: 20px;
    width: 20px;
    display:block;
    padding: 0 0 0 0px;
}

Answer 1

这是因为您使用背景图像来执行此操作。背景图像放置在元素本身后面，这就是它背后出现的原因。要解决此问题，您可以使用::before伪元素：

input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label {
    height: 20px;
    display:block;
    padding: 0;
    vertical-align: top;
}

input[type="checkbox"] + label::before {
    content: url("uncheck.png");
    width: 20px;
    height: 20px;
    padding-right: 3px;
}
input[type="checkbox"]:checked + label::before {
    content: url("checked.png");
}

这是通过CSS向元素添加图像的最简单方法。如果并非所有浏览器都支持::before，则会使用背景图片，但支持:checked的所有浏览器也支持::before。

我改变的其他事情：

• 我在字符串周围放置了引号（所以属性选择器的值和URL）
• 我已将您的padding: 0 0 0 0px;更改为padding: 0;，因为这些效果完全相同
• 我遗漏了:checked和默认样式之间的重复样式。 width，height和padding-right将适用于:checked + label::before以及未经检查的版本。

Answer 2

我已将此代码块添加到css并修复了问题。

label {
    display: block;
    padding-left: 55px;
    text-indent: 30px;
}