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

原文： Checkbox Trickery with CSS

翻译：涂鸦码龙

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

基本配方

从 HTML 着手。

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

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

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

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

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

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

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

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 用到了单选按钮。

<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>

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

.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 如下： 是文件夹，两个 元素是文件夹里的文件。

<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 外面包裹额外

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

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

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

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

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

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

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

Split List（分隔列表）

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

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

HTML 像这样：

<div class="items">    <input id="item1" type="checkbox" checked>    <label for="item1">Create a to-do list</label>        <!-- more items -->        <h2 id="Done">Done</h2>    <h2 id="Not-Done">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属性重排元素。当复选框选中的时候， 的 order 值由 4变为 2，列表选项就从 “Not Done”

下面移到了 “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属性一致。我就是这么把角色跟队伍匹配起来的。

<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 id="Angel">Angel</h2>        <img src="/static/imghw/default1.png"  data-src="ct-angel.png"  class="lazy" alt="">    </li>        <!-- 省略更多角色 --></ul>

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

标签中了 —— 每个名字读两次也没有必要。此外，我没有真正的隐藏 元素（只是收缩和渐隐），屏幕阅读器可以轻易的跳过未高亮的角色。我仅仅需要隐藏

。

当选择团队的时候，高亮对应的角色，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行继续重复上一步，只不过把

换成了 。

综述

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

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

顯示更多

熱門文章

<🎜>：種植花園 - 完整的突變指南

3 週前 By DDD

<🎜>：泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙

3 週前 By 尊渡假赌尊渡假赌尊渡假赌

如何修復KB5055612無法在Windows 10中安裝？

3 週前 By DDD

北端：融合系統，解釋

3 週前 By 尊渡假赌尊渡假赌尊渡假赌

Mandragora：巫婆樹的耳語 - 如何解鎖抓鉤

3 週前 By 尊渡假赌尊渡假赌尊渡假赌

顯示更多

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

顯示更多

熱門話題

Java教學

1665

14

CakePHP 教程

1424

52

Laravel 教程

1322

25

PHP教程

1270

29

C# 教程

1250

24

顯示更多

Related knowledge

了解HTML，CSS和JavaScript：初學者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML：結構，CSS：樣式，JavaScript：行為 Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web開發中的作用分別是：1.HTML定義網頁結構，2.CSS控製網頁樣式，3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。

HTML，CSS和JavaScript的未來：網絡開發趨勢 Apr 19, 2025 am 12:02 AM

HTML的未來趨勢是語義化和Web組件，CSS的未來趨勢是CSS-in-JS和CSSHoudini，JavaScript的未來趨勢是WebAssembly和Serverless。 1.HTML的語義化提高可訪問性和SEO效果，Web組件提升開發效率但需注意瀏覽器兼容性。 2.CSS-in-JS增強樣式管理靈活性但可能增大文件體積，CSSHoudini允許直接操作CSS渲染。 3.WebAssembly優化瀏覽器應用性能但學習曲線陡，Serverless簡化開發但需優化冷啟動問題。

HTML的未來：網絡設計的發展和趨勢 Apr 17, 2025 am 12:12 AM

HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。

HTML與CSS vs. JavaScript：比較概述 Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在網頁開發中的角色分別是：HTML負責內容結構，CSS負責樣式，JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容，確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式，使其美觀易讀。 3.JavaScript通過腳本控製網頁行為，實現動態和交互功能。

HTML：建立網頁的結構 Apr 14, 2025 am 12:14 AM

HTML是構建網頁結構的基石。 1.HTML定義內容結構和語義，使用、、等標籤。 2.提供語義化標記，如、、等，提升SEO效果。 3.通過標籤實現用戶交互，需注意表單驗證。 4.使用、等高級元素結合JavaScript實現動態效果。 5.常見錯誤包括標籤未閉合和屬性值未加引號，需使用驗證工具。 6.優化策略包括減少HTTP請求、壓縮HTML、使用語義化標籤等。

HTML與CSS和JavaScript：比較Web技術 Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是構建現代網頁的核心技術：1.HTML定義網頁結構，2.CSS負責網頁外觀，3.JavaScript提供網頁動態和交互性，它們共同作用，打造出用戶體驗良好的網站。

HTML：是編程語言還是其他？ Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增強WebevebDevelopment。

See all articles