Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS
Webdesign

快速小技巧:简单的CSS3多选框(Checkbox)和单选框(Radio Button)

by
Length:LongLanguages:

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选择器来囊括整篇教程:

现在,对于那些觉得不需要任何指导的人们,别害怕,接着往下读吧!

好吧,回到我们的话题上。我们究竟要做什么?嗯,拜CSS3的俏皮的:checked伪选择器所赐,我们可以指向那些已经被选中的元素(或者未被选中的)。 我们然后使用+,来自CSS2.1的相邻兄弟选择器来选择那些直接跟随这选框的元素,在我们的情况里就是Label。

2. 设置好我们的HTML

现在,我们将开始创建我们的HTML和CSS文件(或者任何你希望你的样式表作用的页面结构)然后开始工作,我会假设你知道如何做这一步,所以我就不提关于这个部分的细节。

由于我只是为你展示基本的原理,并帮你走上正轨,所以我只会用多选框作为例子向你展示技巧,而单选框的操作是完全相同的,我也在本文中包含了。

好了,让我们正式开始好么?我们首先从创建多选框input开始,后面接一个label。

现在,假设你并不是很了解<label>元素,你必须链接input和label这样当你对label进行交互操作的时候input才有回馈。这个是使用for=""和input的ID来实现的。

我同事会添加一个<span>在label里面,这仅仅是个人偏好,不过你会在第三步里面了解的更详细。

3. 我们为什么在这里:CSS

这里就是有趣的部分开始的地方,首先,作为这篇教程最基础的地方,就是隐藏原始的多选框。

这样就搞定了,我们可以为label添加样式,但是更明确的是给在其内部的span添加样式,我这么做是因为这样我可以获得更多对于位置的控制。 如果没有它(span)的话你可能会直接使用背景图片在label上,然后当你想改变它的位置的时候可能会变的有点困难。

好了,让我来快速的解释一下这个,首先,注意背景。由于我有一个小的标志图片集,所以我所做的就是背景的位置是直接在span上面的。 由于每一个“小精灵”图标对于span自己有一个绝对的width和height,所以我们在设定属性的时候就相对简单一点,永远跟随图片的尺寸走。

Our sprite sheet
我们的“小精灵”图标集

这里是剩下的CSS,是我使用的样式,这个纯粹是为了追求美感而根据我的品位特别设计的样式。

4. 让他们工作

接下来就没什么工作要做了,所以让我们来把项目整理一下。最后一件事你会需要做的是提供一条声明指向input是选中状态的时候,然后可选的你可以同时设定鼠标滑过,这个相当的简单,来看!

注意由于我使用了我自己的“小精灵”标志,所以我仅仅只是改变了背景的位置。注意,同时当选项框选中的时候我也只是给label里面的span添加了样式,我使用的是CSS3的:checked伪选择器。

浏览器支持程度的快速笔记

伪选择器现在已经被各大浏览器很好地支持了,但是有时候也还是要告诫开发人员要小心,同时后备机制(fallback)也会非常的优美。

Can I use data for pseudo selectors
普通的伪选择器在我能使用么上面的数据
IE9 on Windows 7
后备机制:IE9在Windows 7上运行

早年的手机也会成为一个问题 - :checked的支持并不是很明确,举个例子,手机的Safari在IOS 6之前的版本就不支持它们

结论

好了,所以我们就完成了,对么?好吧,让我们再检查一遍:首先是HTML:

你的看起来也是一样么?别忘了添加那个<span>!当你自己用这个做实验的时候,我非常强烈的建议寻找新的不一样的方法来完成这一步骤。 我很乐意看到你如果能发现更有效率的方式。现在是CSS:

所有的内容都在了?非常好,记得,这里面的很多都是特别为了这个范本教程来创建的,我鼓励你自己创建属于你自己的样式,并且试验不同的位置和展示形态。

作为结论,最重要的事情是你可以记住我第一行就写了的CSS语句:

使用它,你可以创建各种不同的项目,对于:checked的可用性不仅仅体现在多选框和单选框中,还可以用于表单等地方,但我会把这部分留给你自己去发掘,你可以尝试以下的几个项目:

  • 添加一个适用于视网膜显示屏的2x尺寸的标志集
  • 使用SVG来替代数为图像

我希望你们能喜欢这篇简短的文章并,且希望你们无论从中学到哪些知识都能将它们发扬光大。

关注我们的公众号
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.