checkbox

iPhone Checkbox Effects

iPhone Checkbox Effects

iPhone Checkbox Effect是一个很经典的CSS3的案例了,这样的效果到处可见,如果你还不清楚怎么制作的话,可以点击这里,阅读详细的制作方法。而且w3cplus有关于checkbox的制作方法教程也蛮多的,前不久,藤藤每每日一练中就有一个优秀的案例,今天我只是把以前教程中运用的demo整理放上来,希望对新学习的同学有所帮助。

藤藤每日一练——Pure CSS3 Checkbox

Pure CSS3 Checkbox

这个案例是使用了CSS3制作了六种不同风格的checkbox效果。表单的checkbox自定义效果,在webkit内核下,我们可以随心所意的进行自定义样式的美化,但在其他浏览器下还是有些麻烦,早期使用jQuery插件或者别的JavaScript脚本代码来实现,今天的CSS3属性能让你解决这个难题。当然你要知道制作的思路,不然还是有难度的。在整个效果中,最关键的是标签的配合以及":before"和“:after”等CSS3选择器的应用,特别声明一下,由于input的伪类选择器在部分浏览器下还不支持,所以需要添加一些标签来辅助实现":before"这样的伪类选择器的效果,详细的请看藤藤是怎么制作的吧。

返回顶部