如何仅使用 CSS 设置复选框和标签样式答案

【问题标题】：How to Checkbox and label style only with CSS如何仅使用 CSS 设置复选框和标签样式
【发布时间】：2014-09-14 13:22:36
【问题描述】：

有人可以帮助我如何设计复选框和标签，例如仅使用 css 在共享图片上：悬停效果，正常和何时用蓝色内部检查

我正在努力，但我做不到。

【问题讨论】：

能否将MCVE/minimal 相关代码粘贴到您的问题中？

标签： css checkbox label

【解决方案1】：

下面应该给你一个不错的起点。您希望根据前面复选框的 :checked 状态设置相关的 label 及其 :before 伪元素的样式，该复选框本身是隐藏的。

Demo Fiddle

And a revised version，带有稍微复杂的 CSS

HTML

<input id='check1' type='checkbox'>
<label for='check1'>Click me!</label>

CSS

input[type=checkbox] {
    display:none;
}
input[type=checkbox]:checked +label:before {
    background:blue;
}
label {
    color:blue;
}
label:before {
    content:'';
    height:1em;
    width:1em;
    border:1px solid blue;
    display:inline-block;
}

【讨论】：

谢谢，关于悬停效果，我可以使用 label:hover 或鼠标悬停时文本和复选框都改变颜色？

【解决方案2】：

这是完全调整后的版本：

FIDDLE DEMO

源代码直接取自@SW4，应该是他的功劳。

HTML：

<input id='check1' type='checkbox'>
<label for='check1'>Click me!</label>
<br/>
<input id='check2' type='checkbox'>
<label for='check2'>Click me!</label>
<br/>
<input id='check3' type='checkbox'>
<label for='check3'>Click me!</label>
<br/>

CSS：

input[type=checkbox] {
    display:none;
}
input[type=checkbox]:checked +label:before {
    background:#01A6DE;
    width: 15px;
    height: 15px;
    border: 0;
}
label {
    color:black;
    font-family:arial;
    font-size:12px;
    position:relative;
    padding-left:20px;
}
label:hover {
    color:#01A6DE;
}
label:hover:before {
    border:1px solid #01A6DE;
}
label:before {
    content:'';
    height:13px;
    width:13px;
    border:1px solid lightgray;
    display:inline-block;
    position:absolute;
    top:0;
    left:0;
}

【讨论】：