复选框的 CSS 魔法_html/css_WEB-ITnose
程序员文章站
2023-12-29 13:48:16
...
原文: Checkbox Trickery with CSS
翻译:涂鸦码龙
Checkbox 复选框相当好用,加对 CSS 魔法有奇效。此文旨在展示一些利用 checkbox 实现的有创意的东西,并且文中的例子 没用 JavaScript 哟。
基本配方
从 HTML 着手。
此处无技巧可言。
input { position: absolute; left: -9999px;}
为什么不用 display: none?因为屏幕阅读机和键盘 Tab 会忽略它。此方法让 保持在文档流中,但是让它离屏隐藏(超出屏幕可见范围达到隐藏)。
隐藏 以后,我们更容易大展身手。我们仍需传达选中/未选两种状态,但是可以通过
input:checked + label { /* 牛X闪闪的样式 */}
我们使用 :checked伪类, 和相邻兄弟元素选择器( +)的组合达到目的,当复选框选中时,找到紧随其后的
input:checked + label::before { /* 指示器的样式 */}
来,看看实际效果吧。例子用到了以上提及的基本配方,把一个普普通通的复选框改造得当人眼前一亮。
See the Pen Checkbox Trickery: Simple Toggleby Will Boyd ( @lonekorean) on CodePen.
最大的好处是,包含在
推荐阅读
-
div中有一个marquee标签,marquee中有滚动显示的文字,如何让文字在div中垂直居中从右向左滚动显示?_html/css_WEB-ITnose
-
复选框的 CSS 魔法_html/css_WEB-ITnose
-
提升网页加载速度的优化技巧_html/css_WEB-ITnose
-
iframe里的页面禁止右键事件_html/css_WEB-ITnose
-
CSS > 译文:理解CSS中的块级格式化上下文_html/css_WEB-ITnose
-
dw用div布局 布局后的顶部有空白 怎么都去不掉_html/css_WEB-ITnose
-
你的团队需要一套工具指南_html/css_WEB-ITnose
-
css5种实现垂直居中_html/css_WEB-ITnose
-
java selenium (十四) 处理Iframe 中的元素_html/css_WEB-ITnose
-
带命名空间的action再次返回原来页面,命名空间引起的错误_html/css_WEB-ITnose