checkbox 自定义样式

checkbox自定义样式

纯css实现的主要手段是利用label标签的模拟功能。label的for属性可以关联一个具体的input元素,即使这个input本身不可被用户可见,有个与它对应的label后,用户可以直接通过和label标签交互来替代原生的input——而这给我们的样式模拟留下了空间。简而言之就是

隐藏原生input,样式定义的过程留给label (那为什么不直接改变checkbox的样式?因为checkbox作为浏览器默认组件,样式更改上并没有label那么方便,很多属性对checkbox都是不起作用的,比如background,而label在样式上基本和div一样’任人宰割’)

而在选择事件上,由于css的“相邻选择符(E+F)”的存在,让我们可以直接利用html的默认checkbox,免去了js模拟选择的麻烦。

See the Pen dNrOap by chris (@isevenfox) on CodePen.

参考资料


Warning: Use of undefined constant wp_related_posts - assumed 'wp_related_posts' (this will throw an Error in a future version of PHP) in /var/www/html/afox/wp-content/themes/minty/functions.php on line 206

Warning: Use of undefined constant related_entries - assumed 'related_entries' (this will throw an Error in a future version of PHP) in /var/www/html/afox/wp-content/themes/minty/functions.php on line 207
分享到:

发表评论

昵称

This site uses Akismet to reduce spam. Learn how your comment data is processed.

沙发空缺中,还不快抢~