隣接セレクタを使用したトグルボタン

IEはバージョン8から隣接セレクタが使えるようになります。 ここでは、その隣接セレクタとラジオボタンを使ってトグルボタンを作ってみます。 ラジオボタンをチェックボックスに変更すれば複数選択可能なボタンが表現できます。

Toggle Button Demo

要点は、下記の通りです。

• :checked 擬似クラスと隣接セレクタ（+）を使用
• input要素は非表示にして、隣接する span.label 要素をボタンのように見せる
• label 要素でラップして選択出来るようにする

ところが、このコードは次に挙げる問題によりIE8では正常に動作しません。

非表示のラジオボタン/チェックボックスの選択が出来ない

IE8以下では、display:none や visibility:hidden で非表示にしたinput要素を選択する事ができません。 これは関連付けられた label 要素をクリックしても同様です。 選択出来ないというのはつまり、checked 属性もつかなければ、changeイベントも発火しないという事です。

そこで、display/visibility を使わずに opacity を使用して非表示にします。

.toggle-button input[type=radio] {
    position: absolute;
    opacity: 0;
    filter: alpha(opacity=0);
    outline: none;
}

:checked の使用

IE8は隣接セレクタは使えますが、:checked 擬似クラスには対応していません。 その為、代替として選択状態の物に checked クラスを付与して使用します。

.toggle-button .checked + .label {
    background-color: magenta;
    color: #fff;
}

そして、input要素の選択状態と checked クラスを同期する為に次のような処理を追加してやります。

$(document).on("change", "input[type=radio], input[type=checkbox]", function(){
    $(document.getElementsByName(this.name)).each(function(){
        $(this).toggleClass("checked", this.checked);
    });
});

このコードは、input要素の選択状態が更新されるたびに、 同じnameを持ったinput要素の checked クラスの有無を、その選択状態によって更新します。

さらに注意が必要なのは、次のような書き方が出来ない点です。

.toggle-button :checked + .label,
.toggle-button .checked + .label {
    /* ここの指定はIE8で無視される */
}

一見問題なさそうですが、:checked 非対応のIE8ではこのセレクタ内のスタイル指定は無視されてしまいます。

.checked と :checked はJavaScriptで同期されているので .checked の指定だけで良しとするか、 どうしても :checked の指定も記述したい場合は分離して指定する必要があります。

.toggle-button :checked + .label { ... }
.toggle-button .checked + .label { ... }

最終的なコード

Toggle Button Demo

（おまけ）IE11のエミュレーションでの表示不具合

IE11の開発ツールのエミュレーション機能でIE8を選択して上のコードを確認すると、 隣接セレクタまわりの表示更新が上手くされずに、少しおかしな挙動を見せます。

• ボタンをクリックしてもボタンのスタイルが更新されない
• 前に選択されていたボタンがきちんとトグルされない

ちなみにマウスオーバーするとようやくボタンのスタイルが更新されたりします。

ネイティブのIE8はもちろん、IE10迄のブラウザモード切替でも正常に動作するのでさしたる問題ではないですが、 動作確認がちょっと捗らなくなるので、そういう事があるのだと知っておくと良いと思います。

© まっは画伯

どんなスタイルにすると「押しごたえ」が生まれる？

• へこんだデザインにする
• 位置を下げる
• ちょっと暗くしてみる

あたりで「押しごたえ」が出るのではないでしょうか。
（ざっくばらん）

基本は「:active」で

:hoverがマウスオーバー時のスタイルならば、
ボタンを押下した時のスタイルは:activeで記述します。

こちらは一例。
（IEだと残念な見栄えになります）

• DEMO:1 ( jsFiddle )

HTML

<a href="#" class="button">BUTTON</a>

CSS

.button {
    display:inline-block;
    padding:5px 10px;
    background-color:#69c;
    color:#fff;
    border:1px solid #69c;
    text-decoration:none;
    font-size:13px;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;
}
.button:hover{
    background-color:#79acdf;
    -webkit-box-shadow:inset 0px 0px 3px #fff;
    -moz-box-shadow:inset 0px 0px 3px #fff;
    box-shadow:inset 0px 0px 3px #fff;
}
.button:active{
    padding-top:6px;
    padding-bottom:4px;
    border:1px solid #334c66;
    background-color:#69c;
    color:#e0ebf5;
    -webkit-box-shadow:inset 0px 0px 8px #334c66;
    -moz-box-shadow:inset 0px 0px 2px #3a6da0;
    box-shadow:inset 0px 0px 2px #3a6da0;
}

上下paddingを調整して押下した感を出してます。
ちなみにこれをインラインで使おうとすると回りも巻き込んでしまうのでご注意を。

IE6/7だとクリック後に復帰できない問題

IE6/7で見ると、ボタンをクリックした後もフォーカスが残ってしまっているのか、
他の要素をクリックするまで:activeのスタイルのままになってしまいます。

なので、例えばJavaScriptでこんなのを足してみます。（要jQuery）
クリックイベントが発生した時に、ボタンからフォーカスを外しています。

• DEMO:2 ( jsFiddle )

$(".button").click( function(){ this.blur(); } );

とはいっても、画面遷移しちゃうようなボタンでやったところで、あまり見てもらえなくて残念。
例えばAjaxコンテンツのような、その場で切り替わるページなら、
「押し応え」を付加する事で使い心地が向上するかもしれませんね！

例えばこんなナビゲーションがあるとしますね。

こんなかんじにマークアップされているとしましょう。

<ul id="navi">
    <li><a href="#" id="navi-home">HOME</a></li>
    <li><a href="#" id="navi-product">PRODUCTS</a></li>
    <li><a href="#" id="navi-about">ABOUT</a></li>
    <li><a href="#" id="navi-blog">BLOG</a></li>
    <li><a href="#" id="navi-contact">CONTACT</a></li>
</ul>

アクティブに見せる為の「.active」クラスを用意します。

#navi li a.active {
    /* なんらかのスタイル */
}

仕上げにスクリプトを書きます。jQuery使ってます。

var naviConfig = [
    { rule:"/product/", selector:"#navi-product" },
    { rule:"/about/", selector:"#navi-about" },
    { rule:"/blog/", selector:"#navi-blog" },
    { rule:"/contact/", selector:"#navi-contact" }
];
(function(config){
    for(var i=0;i<config.length;i++){
        if( location.href.match(config[i].rule) ){
            $(config[i].selector).addClass("active");
            return;
        }
    }
})( naviConfig );

ご覧の通り、ruleの文字列に現在のURLがマッチした場合に、
selectorにあてはまる要素にactiveクラスを付加しています。
それだけです。

例えば、URLが「http://www.example.com/product/hogehoge.html」等だった場合に、
「/product/」の部分がマッチして#navi-productの要素がアクティブになります。
複雑なルール付けが必要な場合は、ruleに正規表現を使用してもいいですね。

静的にclass=”active”を書くのが良いとも言えますが、
Dreamweaverのライブラリや各CMSでモジュール化してあるナビゲーションだと、
条件分岐などが面倒な場合があります。
そんな時はこんな感じにJavaScriptを使ってさっくり処理してしまうのも一手かと。

そろそろフルキーボード以外のインターフェイスも…
と思わせてしまう素敵なデザインのコーデッド・キーボード。
使いこなすにはかなり訓練が必要そうではありますが、
片手で何でも入力出来るとなると活躍の場も結構あるのではないでしょうか？

脳インターフェイスの実用化はまだですかね。
（これこそ訓練が必要か）