服务报价 | 域名主机 | 网络营销 | 软件工具| [加入收藏]
 热线电话: #
当前位置: 主页 > 开发教程 > HTML/CSS教程 >

复选框的 CSS 魔法

时间:2016-01-15 10:29来源:未知 作者:最模板 点击:
Checkbox 复选框相当好用,加对 CSS 魔法有奇效。此文旨在展示一些利用 checkbox 实现的有创意的东西,并且文中的例子没用 JavaScript哟。 基本配方 从 HTML 着手。 input id=toggle type=checkboxla

Checkbox 复选框相当好用,加对 CSS 魔法有奇效。此文旨在展示一些利用 checkbox 实现的有创意的东西,并且文中的例子 没用 JavaScript 哟。

基本配方

从 HTML 着手。

<input id="toggle" type="checkbox">
<label for="toggle">

此处无技巧可言。 <label> 的 for 属性匹配 <input> 的 id 属性,因此点击<label> 可以控制 <input> 复选框。这点尤其重要,因为下一步将隐藏<input> 。

input {
    position: absolute;
    left: -9999px;
}

为什么不用 display: none ?因为屏幕阅读机和键盘 Tab 会忽略它。此方法让<input> 保持在文档流中,但是让它离屏隐藏(超出屏幕可见范围达到隐藏)。

隐藏 <input> 以后,我们更容易大展身手。我们仍需传达选中/未选两种状态,但是可以通过 <label> 完成。真正的派对开始啦。

input:checked + label {
    /* 牛X闪闪的样式 */
}

我们使用 :checked 伪类, 和相邻兄弟元素选择器( + )的组合达到目的,当复选框选中时,找到紧随其后的 <label> 元素,加上想要的样式。还可以利用<label> 中的伪元素( ::before 和 ::after )实现更有创意的想法。

input:checked + label::before {
    /* 指示器的样式 */
}

来,看看实际效果吧。例子用到了以上提及的基本配方,把一个普普通通的复选框改造得当人眼前一亮。

See the Pen Checkbox Trickery: Simple Toggle by Will Boyd ( @lonekorean ) onCodePen .

最大的好处是,包含在 <form> 中的复选框的值仍然可以被提交。我们只改变了外观,并没有影响功能。

隐藏/显示内容

目前为止,我们都是给 <label> 加样式,我们可以更进一步。这个例子会根据用户的选择,动态地隐藏/显示表单的部分内容。

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

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

<input id="how-friend" name="how" type="radio">
<label for="how-friend" class="side-label">From a friend</label>

<input id="how-internet" name="how" type="radio">
<label for="how-internet" class="side-label">Somewhere on the internet</label>

<input id="how-other" name="how" type="radio">
<label for="how-other" class="side-label">Other...</label>

<div class="how-other-disclosure">
    <label for="how-other-explain" class="top-label">Please explain</label>
    <textarea id="how-other-explain"></textarea>
</div>

单选按钮指示器利用 <label> 内的 ::before 伪元素(外部的圆环)和::after 伪元素(内部的绿点)实现,当单选按钮选中 / 未选时显示 / 隐藏::after 伪元素相当简单。

.side-label::after {
    display: none;

    /* 其它样式 */
}

input:checked + .side-label::after {
    display: block;
}

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

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

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

树状文件夹

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

See the Pen Checkbox Trickery: Folder Tree by Will Boyd ( @lonekorean ) onCodePen .

单个文件夹的 HTML 如下: <label> 是文件夹,两个 <a> 元素是文件夹里的文件。

<div>
    <input id="n-1" type="checkbox">
    <label for="n-1">Blue</label>
    <div class="sub">
        <a href="#link">Mana Leak</a>
        <a href="#link">Time Warp</a>
    </div>
</div>

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 外面包裹额外 <div> 的原因,为了确保选择器能够选到元素,打开兄弟文件夹。

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

理所当然,文件夹可以嵌套。只需把另一个文件夹的 HTML 放入 <div class="sub"> 即可。点击 “Multicolor”看看效果吧。

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

<input type="reset" value="Collapse All">

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

Split List(分隔列表)

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

See the Pen Checkbox Trickery: To-Do List by Will Boyd ( @lonekorean ) onCodePen .

HTML 像这样:

<div class="items">
    <input id="item1" type="checkbox" checked>
    <label for="item1">Create a to-do list</label>
    
    <!-- more items -->
    
    <h2 class="done" aria-hidden="true">Done</h2>
    <h2 class="undone" aria-hidden="true">Not Done</h2>
</div>

分隔列表是由 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 属性重排元素。当复选框选中的时候, <label>的 order 值由 4 变为 2 ,列表选项就从 “Not Done” <h2> 下面移到了 “Done”<h2> 下面。

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

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

分组筛选

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

See the Pen Checkbox Trickery: Group Filter by Will Boyd ( @lonekorean ) onCodePen .

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

<input id="original" type="radio" name="team" checked>
<label for="original">Original X-Men</label>

<!-- 省略更多团队 -->

<br>
<ul class="characters">
    <li id="angel" data-teams="original force factor hellfire">
        <h2>Angel</h2>
        <img src="ct-angel.png" alt="">
    </li>
    
    <!-- 省略更多角色 -->
</ul>

关于可访问性,我使用了空的 alt 属性,因为角色的名字已显示在 <h2> 标签中了 —— 每个名字读两次也没有必要。此外,我没有真正的隐藏 <img> 元素(只是收缩和渐隐),屏幕阅读器可以轻易的跳过未高亮的角色。我仅仅需要隐藏 <h2> 。

当选择团队的时候,高亮对应的角色,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’ 的元素,然后找到它里面的<h2> 。2-4行的 ‘force’, ‘factor’, 和 ‘hellfire’ 重复上一步。8-11行继续重复上一步,只不过把 <h2> 换成了 <img> 。

(责任编辑:最模板)
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
栏目列表
热点内容