html - 自定义复选框勾选样式

Question

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

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

尽管看起来有很大不同，但起初我只是想用蓝色方 block 更改刻度符号并使用原来的 checkbox请查看，如果我遗漏了什么并且它仍然是最简单的方法，请提供示例。

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

这是我自己实现的 - JSFiddel Example但如果是那样的话，我想补充两件主要的事情:

• 我不知道为什么我应该得到 <label>涉及标签，但似乎我无法绕过它，所以现在我不确定添加 Remember me 的最佳方法是什么<label>..</label> 之间的文本与之前一样标签。现在，如果我把它放在那里，它会弄乱复选框本身。
• 我希望未选中的框看起来更像原来的框。现在我使用纯花冠 ( lightgrey )，但如果它更接近原始样式就更好了。

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

Answer 1

您必须使用标签，否则您无法在单击时选中该复选框。

对于“记住我”，您可以添加另一个包含文本的标签。要使其在同一行，您必须将 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;
}

要在未选中时更像 native 复选框，您可以使用

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