Chinese (Simplified) (中文（简体）) translation by Alfred Y. Zhu (you can also view the original English article)
你是否好奇该如何在不使用JavaScript的前提下为多选框和单选框添加样式？你要谢谢CSS3！这里是我们即将要创建的效果的预览：
如果你想找一些图片来作为你的UI元素，你可以看看Envato Elements上可供购买的的UI集。或者，你也可以就泡一壶茶然后开始这个教程！
1. 理解整个流程
推荐阅读：30个你必须记住的CSS选择器
对于那些你们觉得你的CSS技能很有信心的，并且你仅仅只是想听听正确方向的，这里有一条最重要的CSS选择器来囊括整篇教程：
1 |
input[type="checkbox"]:checked + label { |
2 |
|
3 |
}
|
现在，对于那些觉得不需要任何指导的人们，别害怕，接着往下读吧！
好吧，回到我们的话题上。我们究竟要做什么？嗯，拜CSS3的俏皮的:checked伪选择器所赐，我们可以指向那些已经被选中的元素（或者未被选中的）。 我们然后使用+，来自CSS2.1的相邻兄弟选择器来选择那些直接跟随这选框的元素，在我们的情况里就是Label。
2. 设置好我们的HTML
现在，我们将开始创建我们的HTML和CSS文件（或者任何你希望你的样式表作用的页面结构）然后开始工作，我会假设你知道如何做这一步，所以我就不提关于这个部分的细节。
由于我只是为你展示基本的原理，并帮你走上正轨，所以我只会用多选框作为例子向你展示技巧，而单选框的操作是完全相同的，我也在本文中包含了。
好了，让我们正式开始好么？我们首先从创建多选框input开始，后面接一个label。
1 |
<input type="checkbox" /> |
2 |
<label>Styled Check Box</label> |
现在，假设你并不是很了解<label>元素，你必须链接input和label这样当你对label进行交互操作的时候input才有回馈。这个是使用for=""和input的ID来实现的。
1 |
<input type="checkbox" id="c1" name="cc" /> |
2 |
<label for="c1">Check Box 1</label> |
我同事会添加一个<span>在label里面，这仅仅是个人偏好，不过你会在第三步里面了解的更详细。
3. 我们为什么在这里：CSS
这里就是有趣的部分开始的地方，首先，作为这篇教程最基础的地方，就是隐藏原始的多选框。
1 |
input[type="checkbox"] { |
2 |
display:none; |
3 |
}
|
这样就搞定了，我们可以为label添加样式，但是更明确的是给在其内部的span添加样式，我这么做是因为这样我可以获得更多对于位置的控制。 如果没有它（span）的话你可能会直接使用背景图片在label上，然后当你想改变它的位置的时候可能会变的有点困难。
1 |
input[type="checkbox"] { |
2 |
display:none; |
3 |
}
|
4 |
input[type="checkbox"] + label span { |
5 |
display:inline-block; |
6 |
width:19px; |
7 |
height:19px; |
8 |
background:url(check_radio_sheet.png) left top no-repeat; |
9 |
}
|
好了，让我来快速的解释一下这个，首先，注意背景。由于我有一个小的标志图片集，所以我所做的就是背景的位置是直接在span上面的。 由于每一个“小精灵”图标对于span自己有一个绝对的width和height，所以我们在设定属性的时候就相对简单一点，永远跟随图片的尺寸走。
这里是剩下的CSS，是我使用的样式，这个纯粹是为了追求美感而根据我的品位特别设计的样式。
1 |
input[type="checkbox"] { |
2 |
display:none; |
3 |
}
|
4 |
input[type="checkbox"] + label span { |
5 |
display:inline-block; |
6 |
width:19px; |
7 |
height:19px; |
8 |
margin:-2px 10px 0 0; |
9 |
vertical-align:middle; |
10 |
background:url(check_radio_sheet.png) left top no-repeat; |
11 |
cursor:pointer; |
12 |
}
|
4. 让他们工作
接下来就没什么工作要做了，所以让我们来把项目整理一下。最后一件事你会需要做的是提供一条声明指向input是选中状态的时候，然后可选的你可以同时设定鼠标滑过，这个相当的简单，来看！
1 |
input[type="checkbox"] { |
2 |
display:none; |
3 |
}
|
4 |
input[type="checkbox"] + label span { |
5 |
display:inline-block; |
6 |
width:19px; |
7 |
height:19px; |
8 |
margin:-2px 10px 0 0; |
9 |
vertical-align:middle; |
10 |
background:url(check_radio_sheet.png) left top no-repeat; |
11 |
cursor:pointer; |
12 |
}
|
13 |
input[type="checkbox"]:checked + label span { |
14 |
background:url(check_radio_sheet.png) -19px top no-repeat; |
15 |
}
|
注意由于我使用了我自己的“小精灵”标志，所以我仅仅只是改变了背景的位置。注意，同时当选项框选中的时候我也只是给label里面的span添加了样式，我使用的是CSS3的:checked伪选择器。
浏览器支持程度的快速笔记
伪选择器现在已经被各大浏览器很好地支持了，但是有时候也还是要告诫开发人员要小心，同时后备机制(fallback)也会非常的优美。
早年的手机也会成为一个问题 - :checked的支持并不是很明确，举个例子，手机的Safari在IOS 6之前的版本就不支持它们。
结论
好了，所以我们就完成了，对么？好吧，让我们再检查一遍：首先是HTML：
1 |
<input type="checkbox" id="c1" name="cc" /> |
2 |
<label for="c1"><span></span>Check Box 1</label> |
你的看起来也是一样么？别忘了添加那个<span>！当你自己用这个做实验的时候，我非常强烈的建议寻找新的不一样的方法来完成这一步骤。 我很乐意看到你如果能发现更有效率的方式。现在是CSS：
1 |
input[type="checkbox"] { |
2 |
display:none; |
3 |
}
|
4 |
input[type="checkbox"] + label span { |
5 |
display:inline-block; |
6 |
width:19px; |
7 |
height:19px; |
8 |
margin:-2px 10px 0 0; |
9 |
vertical-align:middle; |
10 |
background:url(check_radio_sheet.png) left top no-repeat; |
11 |
cursor:pointer; |
12 |
}
|
13 |
input[type="checkbox"]:checked + label span { |
14 |
background:url(check_radio_sheet.png) -19px top no-repeat; |
15 |
}
|
所有的内容都在了？非常好，记得，这里面的很多都是特别为了这个范本教程来创建的，我鼓励你自己创建属于你自己的样式，并且试验不同的位置和展示形态。
作为结论，最重要的事情是你可以记住我第一行就写了的CSS语句：
1 |
input[type="checkbox"]:checked + label { |
2 |
|
3 |
}
|
使用它，你可以创建各种不同的项目，对于:checked的可用性不仅仅体现在多选框和单选框中，还可以用于表单等地方，但我会把这部分留给你自己去发掘，你可以尝试以下的几个项目：
- 添加一个适用于视网膜显示屏的2x尺寸的标志集
- 使用SVG来替代数为图像
我希望你们能喜欢这篇简短的文章并，且希望你们无论从中学到哪些知识都能将它们发扬光大。
By
