checkboxes_html/css_WEB-ITnose の CSS マジック

原文: Checkbox Trickery with CSS

翻訳: Graffiti Code Dragon

Checkbox チェックボックスはとても使いやすく、CSS マジックを追加すると驚くほど効果的です。この記事は、チェックボックスを使用して実装されたクリエイティブなものをいくつか紹介することを目的としています。記事内の例では JavaScript は使用されていません

よ。 基本レシピ

HTMLから始めましょう。

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

ここにトリックはありません。 2e1cf0710519d5598b1f0f14c36ba674 の for 属性は d5fd7aea971a85678ba271703566ebfd の id 属性と一致するため、2e1cf0710519d5598b1f0f14c36ba674 をクリックすると d5fd7aea971a85678ba271703566ebfd チェックボックスが制御されます。 は次のステップで非表示になるため、これは特に重要です。

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

display: none を使用してみてはいかがでしょうか?スクリーンリーダーとキーボードのタブはそれを無視するためです。このメソッドは、d5fd7aea971a85678ba271703566ebfd をドキュメント フロー内に保持しますが、画面外には非表示になります。

Hide d5fd7aea971a85678ba271703566ebfd 今後は、自分のスキルを披露することが容易になります。チェック済み/未チェックのステータスを伝える必要がありますが、これは 2e1cf0710519d5598b1f0f14c36ba674 を使用して行うことができます。本当のパーティーが始まります。

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

:checked 疑似クラスと、隣接する兄弟要素セレクター (+) の組み合わせを使用して、チェック ボックスをオンにすると、次の 2e1cf0710519d5598b1f0f14c36ba674 要素を見つけます。希望のスタイル。 の疑似要素 (::before および ::after) を使用して、より創造的なアイデアを実現することもできます。

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

ぜひ、実際の効果を実感してください。この例では、上記の基本的な公式を使用して、普通のチェック ボックスを目を引くものに変換します。

CodePen の Will Boyd (@lonekorean) によるペン チェックボックスのトリック: シンプルなトグルを参照してください。

最大の利点は、ff9c23ada1bcecdd1a0fb5d5a0f18437 に含まれるチェックボックスの値を送信できることです。外観を変更しただけで、機能には影響しませんでした。

コンテンツの非表示/表示

これまで、2e1cf0710519d5598b1f0f14c36ba674 にスタイルを追加しましたが、さらに一歩進めることができます。この例では、ユーザーの選択に基づいてフォームの一部を動的に非表示/表示します。

CodePen の Will Boyd (@lonekorean) によるペン チェックボックスのトリック: フォームの開示を参照してください。 :checked 疑似クラスはラジオ ボタンにも機能します。 ?” ラジオボタンが使用されます。

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

ラジオ ボタン インジケーターは、2e1cf0710519d5598b1f0f14c36ba674 内の ::before 疑似要素 (外側のリング) と ::after 疑似要素 (内側の緑色の点) を使用して実装されます。ボタンが選択されています/選択されていない場合の ::after 疑似要素の表示/非表示は非常に簡単です。

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

[その他...] ラジオ ボタンが選択されるまで非表示になります。今回は、コンテンツが非表示になっているときにスクリーン リーダーとキーボードの Tab でそれを無視するようにしたかったので、display: none を使用して dc6dce4a544fdca2df29d5ac0ea9906b を非表示にしました。 CSS を使用して、ラジオ ボタンが選択されたときに dc6dce4a544fdca2df29d5ac0ea9906b を表示します。

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

これまでは隣接兄弟セレクター (+) を使用していましたが、今回は通常の兄弟セレクター (~) を使用する必要があります。これらは非常に似ていますが、

などの隣接していない兄弟要素を見つけることができます。

ツリー フォルダー

前の例の手法を使用して、非表示/表示の両方の機能を持つツリー フォルダー コンポーネントを実装できます。

CodePen の Will Boyd (@lonekorean) によるペン チェックボックスのトリック: フォルダー ツリーを参照してください。 1 つのフォルダーの HTML は次のとおりです。 2e1cf0710519d5598b1f0f14c36ba674 はフォルダーです。フォルダー内のファイル。

<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 が余分な dc6dce4a544fdca2df29d5ac0ea9906b でラップされ、セレクターが要素を選択できるようにするため、兄弟フォルダーを開いている理由です。

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

もちろん、フォルダーを入れ子にすることもできます。別のフォルダーから HTML を 08e905779b51270593328908c8afb34b に配置するだけです。 「マルチカラー」をクリックして効果を確認します。

最後に、リセットボタンについて話しましょう。

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

フォームのリセットボタンはあまり使われることはありませんが、ここではうまく使われています。リセットボタンをクリックすると、すべてのチェックボックスが初期のチェックされていない状態に戻り、すべてのフォルダが閉じます。面白い。

分割リスト (分割リスト)

この例では、何が行われたか、何が行われていなかったかに基づいて、リストのオプションを 2 つの部分に分割します。

CodePen の Will Boyd (@lonekorean) による「ペン チェックボックスのトリック: To-Do リスト」を参照してください。

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

不幸的是，键盘导航和 许多屏幕阅读器会遵循元素在 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>Angel</h2>        <img src="ct-angel.png" alt="">    </li>        <!-- 省略更多角色 --></ul>

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

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

综述

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