自定义复选框选中的样式

Question

我正在尝试自定义我的复选框，最终目标是尽可能接近这个：

不要介意Remember me上的背景，只是为了隐藏我母语上原始标签的文字。

尽管看起来有很多不同，但起初我只是想用蓝色正方形更改刻度线并使用原始的checkbox视图，所以如果我错过了某些东西，它仍然是最简单的方法请提供示例

但是我无法找到一个属性/选项来改变这一点，所以我深入挖掘一下，我决定使用THIS示例来实现我的目标。

这就是我自己实现的目标 - JSFiddel Example但是如果有这样的话，我想添加两件大事：

• 我不知道为什么我应该使用<label>标签，但似乎我无法绕过它，所以现在我不确定添加Remember me文本的最佳方式是什么就像之前在<label>..</label>标签之间一样。现在，如果我把它放在那里，它会搞乱复选框本身。
• 我希望未经检查的框看起来更像原始框。现在我使用固体花冠（lightgrey）但如果它更接近原始风格会很好。

当然，任何会使事情看起来更像问题中提供的示例的更改都会受到赞赏。我并没有坚持这个想法，但它似乎最接近我想要的。

Answer 1

您必须使用label，否则在点击它时无法选中复选框。

对于“记住我”，您可以添加另一个label，其中包含文字。要将其添加到同一行，您必须将display: inline-block添加到#wrap

<div id="wrap">
    <input type='checkbox' name='thing' value='valuable' id="thing" />
    <label class="mark" for="thing"></label>
</div>
<label for="thing">Remember me</label>

#wrap {
    display: inline-block;
}

在未选中时更像是原生复选框，您可以使用

background: transparent;

为了区分这两个标签，我使用class="mark"作为框。

请参见修改后的JSFiddle

这适用于Chrom，但至少对于Firefox 20

#thing {
    display: none;
}

不起作用。对于Firefox 20，您必须使用

#thing {
    position: absolute;
    visibility: hidden;
}

隐藏复选框并将其从正常流程中取出。

JSFiddle

更新

您也可以尝试#thing + label:before创建一个复选框

#thing + label:before
{
    content: "";
    background: transparent;
    height: 9px;
    width: 9px;
    display:inline-block;
    padding: 0 0 0 0px;
    margin-left: 3px;
    margin-bottom: 3px
}
#thing:checked + label:before
{
    background: #0080FF;
}

并在标签中加上“记住我”

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

缺点是，我找不到将盒子和标签放在一行上的方法。

JSFiddle