最近のトグルボタン実装を少し考えてみる - Mach3.laBlogこの記事は賞味期限切れです。（更新から1年が経過しています） 最近ではIE6/7対応がほとんど無くなり、泥臭い手法を取る必要が少し減ってきました。 様々な場面で頻出するトグルボタンUIもまた、以前に比べて少しモダンな形での実装が可能になってきています。 隣接セレクタを使用したトグルボタン IEはバージョン8から隣接セレクタが使えるようになります。 ここでは、その隣接セレクタとラジオボタンを使ってトグルボタンを作ってみます。 ラジオボタンをチェックボックスに変更すれば複数選択可能なボタンが表現できます。 Toggle Button Demo 要点は、下記の通りです。 :checked 擬似クラスと隣接セレクタ（+）を使用 input要素は非表示にして、隣接する span.label 要素をボタンのように見せる label 要素でラップして選択出来るようにする ところが、このコードは次に挙げる
