欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

复选框的 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.

最大的好处是,包含在

中的复选框的值仍然可以被提交。我们只改变了外观,并没有影响功能。

隐藏/显示内容

目前为止,我们都是给

See the Pen Checkbox Trickery: Form Disclosureby Will Boyd ( @lonekorean) on CodePen.

:checked伪类对单选按钮同样奏效,考虑到这一点,“How did you hear about us?”这块的 HTML 用到了单选按钮。

单选按钮指示器利用

.side-label::after { display: none; /* 其它样式 */}input:checked + .side-label::after { display: block;}

一直隐藏,直到“Other…”单选按钮选中时才显示。我使用了 display: none隐藏
,因为这次我确实想让屏幕阅读器和键盘 Tab 在内容隐藏时忽略它。当单选按钮选中时,利用 CSS 显示

#how-other:checked ~ .how-other-disclosure { display: block;}

之前我们一直使用相邻兄弟选择器( +),不过这次得用一般兄弟选择器( ~)。它俩很相似,但是可以找到非相邻的兄弟元素,比如我们的

树状文件夹

我们可以活用之前例子中的技巧,实现一个树状文件夹组件,同样具备隐藏 / 显示两种功能。

See the Pen Checkbox Trickery: Folder Treeby Will Boyd ( @lonekorean) on CodePen.

单个文件夹的 HTML 如下:

Font Awesome 图标用于表示选中(打开)和未选(关闭)状态。

label::before, a::before { display: block; position: absolute; top: 6px; left: -25px; font-family: 'FontAwesome';}label::before { content: '\f07b'; /* closed folder */}input:checked + label::before { content: '\f07c'; /* open folder */}a::before { content: '\f068'; /* dash */}

文件夹里的内容通过一般兄弟选择器( ~)实现显示 / 隐藏。这就是 HTML 外面包裹额外

的原因,为了确保选择器能够选到元素,打开兄弟文件夹。

input:checked ~ .sub { display: block;}

理所当然,文件夹可以嵌套。只需把另一个文件夹的 HTML 放入

即可。点击 “Multicolor”看看效果吧。

最后,我们聊一下重置按钮。

表单的重置按钮很少有人用,不过这里巧用了一下。点击重置按钮,所有复选框恢复成初始的未选中状态,关闭了所有文件夹。有意思吧。

Split List(分隔列表)

这个例子依据已做或未做,把列表选项分成两部分。

See the Pen Checkbox Trickery: To-Do Listby Will Boyd ( @lonekorean) on CodePen.

HTML 像这样:

分隔列表是由 CSS flexbox 实现的,这是关键的 CSS。

.items { display: flex; flex-direction: column;}.done { order: 1;}input:checked + label { order: 2;}.undone { order: 3;}label { order: 4;}

CSS flexbox 可以使用 order属性重排元素。当复选框选中的时候,

下面移到了 “Done”

下面。

不幸的是,键盘导航和 许多屏幕阅读器会遵循元素在 DOM 中的顺序,即使它们被 CSS flexbox 做了视觉上的重排。这就导致 “Done”和“Not Done”的标题对于屏幕阅读器无用,这便是我给它们加了 aria-hidden="true"的原因 —— 被忽略总比引起混淆强。此外,通过键盘和屏幕阅读器完全可以控制分隔列表,正确显示列表项的状态(选中 / 未选)。

如果你对“Done”和“Not Done”其后的计数实现感到好奇,它们用到了 CSS counters。想深入学习的话,可以看 这篇文章。

分组筛选

压轴的例子展示了如何根据筛选条件,高亮显示交叉区域的数据。

See the Pen Checkbox Trickery: Group Filterby Will Boyd ( @lonekorean) on CodePen.

这是简短的 HTML 。注意一下 data-teams属性是由空格分隔的列表,它们每一项恰恰与单选按钮的 id属性一致。我就是这么把角色跟队伍匹配起来的。


  • Angel

    复选框的 CSS 魔法_html/css_WEB-ITnose

关于可访问性,我使用了空的 alt属性,因为角色的名字已显示在

标签中了 —— 每个名字读两次也没有必要。此外,我没有真正的隐藏 复选框的 CSS 魔法_html/css_WEB-ITnose元素(只是收缩和渐隐),屏幕阅读器可以轻易的跳过未高亮的角色。我仅仅需要隐藏

当选择团队的时候,高亮对应的角色,CSS 是这么实现的。

#original:checked ~ .characters [data-teams~="original"] h2,#force:checked ~ .characters [data-teams~="force"] h2,#factor:checked ~ .characters [data-teams~="factor"] h2,#hellfire:checked ~ .characters [data-teams~="hellfire"] h2 { /* styles to show character name */}#original:checked ~ .characters [data-teams~="original"] img,#force:checked ~ .characters [data-teams~="force"] img,#factor:checked ~ .characters [data-teams~="factor"] img,#hellfire:checked ~ .characters [data-teams~="hellfire"] img { /* styles to show character avatar */}

我清楚这些选择器看起来有点吓人,不过也不赖。我们来仔细分析下例子的第一行(译者注:以 CSS 中最长的选择器开始算)。当 id为 ‘original’ 的元素被选中时,找到角色元素里面 data-teams属性包含 ‘original’ 的元素,然后找到它里面的

。2-4行的 ‘force’, ‘factor’, 和 ‘hellfire’ 重复上一步。8-11行继续重复上一步,只不过把

换成了 复选框的 CSS 魔法_html/css_WEB-ITnose

综述

我希望你跟我一样从这些例子中找到了一些乐趣。通过复选框去实现一些好玩的东西,对我而言非常有趣。我并没有排斥在适当的时候使用 JavaScript ,但是没用它也可以实现这么多东西,也是蛮开心的。谢谢阅读!

复选框的 CSS 魔法_html/css_WEB-ITnose

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

相关文章

相关视频


网友评论

文明上网理性发言,请遵守 新闻评论服务协议

我要评论
  • 复选框的 CSS 魔法_html/css_WEB-ITnose
  • 专题推荐

    作者信息
    复选框的 CSS 魔法_html/css_WEB-ITnose

    认证0级讲师

    推荐视频教程
  • 复选框的 CSS 魔法_html/css_WEB-ITnosejavascript初级视频教程
  • 复选框的 CSS 魔法_html/css_WEB-ITnosejquery 基础视频教程
  • 视频教程分类

    上一篇:

    下一篇: