Question

这种自定义复选框的方法对我来说是新的。我可以自定义，并在上面贴上标签。现在我只想将标签移动到复选框的左侧。 HTML和CSS位于jsFiddle链接下方。谢谢！

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

input[type=checkbox] {
    display:none;
}
input[type=checkbox] + label {
    background: #999;
    height: 16px;
    width: 16px;
    display:inline-block;
    padding: 0 0 0 0px;
}
input[type=checkbox]:checked + label {
    background: #0080FF;
    height: 16px;
    width: 16px;
    display:inline-block;
    padding: 0 0 0 0px;
}

Answer 1

试试这个：

input[type=checkbox] {
    display: none;
}
input[type=checkbox] + label {
    display: inline-block;
    padding: 0 16px 0 0;
    min-height: 16px;
    background: no-repeat right center / 16px 16px;
    background-image: linear-gradient(to top, #999, #999);
}
input[type=checkbox]:checked + label {
    background-image: linear-gradient(to top, #0080FF, #0080FF);
}

Demo

我设置了height和width，而不是设置min-height和padding-right。

然后我填写那个填充：

background-image设置颜色。
background-size: 16px 16px设置尺寸。
background-position: right center将背景放在填充中。
background-repeat: no-repeat会阻止背景在填充之外重复。

必须background-image而不是background-color才能使background-size正常工作。因此我使用linear-gradient，替代方法可以是svg或包含1x1 px图像的数据URI。

选中此复选框后，我会更改background-image。

Answer 2

将标签声明移至＆＃39; left＆＃39;对于html中的复选框，然后将css选择器更改为标签+输入[复选框] ...

<强> HTML

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

<强> CSS

input[type=checkbox] {
    display:none;
}
label + input[type=checkbox] {
    background: #999;
    height: 16px;
    width: 16px;
    display:inline-block;
    padding: 0 0 0 0px;
}
label + input[type=checkbox]:checked  {
    background: #0080FF;
    height: 16px;
    width: 16px;
    display:inline-block;
    padding: 0 0 0 0px;
}

Answer 3

试试这个：

input[type=checkbox] {
    display: none;
}
input[type=checkbox] + label:after {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 16px;
    width: 16px;
    background-color: #999;
}
input[type=checkbox]:checked + label:after {
    background-color: #0080FF;
}

Demo

基本上，我没有将label转换为自定义复选框，而是使用伪元素执行此操作。

CSS Custom复选框，标签错误

3 个答案: