CSS おれおれ Advent Calendar 2012 – 18日目
チェックボックスと同じ機能を持つボタンです。押すと引っ込んだ状態になり、もう一度押すと出っ張った状態になります。
なんか現実世界のスイッチで使われてたりしますね。あれです。
デモ
仕組み
トグル
直接隣接接合子+を利用しています。A+Bで「A直後のB」を指す事ができます。
+は隣接兄弟接合子とか言ったりする事もあるみたいです。どういう日本語を充てるべきかわかりませんが、英語だと “Adjacent sibling combinator” です。
そこで:checkedと組み合わせて、「チェックの付いたチェックボックスの直後の<span>」のスタイルを操作しています。
チェックボックス本体はdisplay:noneで非表示にしています。画面には表示されていませんが、先の<span>が<label>の下に配置されているので、それをクリックしてチェックボックスのON/OFFを切り替える事ができます。
スタイル
box-shadowで影を付け、それを切り替えることで手前に出っ張っているか奥へ引っ込んでいるかを表現しています。
また不自然にならないよう、paddingでラベル文字の表示位置をずらしています。
あとおまけなのですが、「押している間」はさらに奥へ引っ込むようにしています。:activeの場合ですね。マウスのボタンを押し下げている状態です。
おしまい
あーAdvent Calendarってこれくらいの長さで良いよね。普段が長過ぎた。ふうー。