如何使用CSS复选框和标签样式

Question

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

我想做但我不能。

Answer 1

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

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;
}

Answer 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;
}