blog.鶯梭庵

二〇一三年 神無月 卅一日 木曜日

CSS だけでアクセシブルなラジオボタンとチェックボックス [/links]

HTML のラジオボタンとチェックボックスはブラウザによって外見が大きく違う。それを統一しようと思った場合、本格的にするなら jQuery のプラグインを使ったりすればよいのだけれど、それほど大がかりにせずに CSS だけで外見を統一する方法を考えた。CSS3 を使えば、JavaScript はいらない(ただし、IE8 以前には対応しない)。

基本的な考え方は、Styling checkboxes and radio buttons using CSS に書かれている通り。本来のラジオボタンやチェックボックスを opacity: 0; で透明にして隠し、label 要素の margin-left を負の値にして、本来のボタンの上にカスタムボタンをかぶせる。

本来のボタンを display: none; で隠すというコードを紹介しているウェブページが多いが、その方法には致命的な欠陥がある。ボタンをキーボードで操作できなくなるのだ。-webkit-appearance: none; を使っている例もあるが、これは当然 Webkit 系のブラウザ(Chrome や Safari など)でしか有効でない。

上記のページでは、ボタンの外見を画像で作って、その画像を label 要素の背景にしている。しかし、アクセシビリティを考えたら、文字を大きくしたときにボタンも比例して大きくなるほうがよい。(それに、画像を用意するのは面倒だ。)


最小限必要な HTML は概ね以下の通り。


<p><input type="radio" id="radio"><label for="radio">ラジオボタン</lable></p>

<p><input type="checkbox" id="checkbox"><label for="checkbox">チェックボックス</lable></p>


まずは本来のボタンのスタイルを指定する。幅をカスタムボタンと同じにした上で、透明にして隠す。


input[type="radio"],

input[type="checkbox"]{

font-size: 100%;

width: 1em;

margin: 0;

padding: 0;

opacity: 0;

}


次に、カスタムボタンを作って上にかぶせる。色はお好みで。border-width は、フォントサイズが 16 ピクセルのときに 3 ピクセルになるようにしている。margin-topmargin-right は位置調整なのでお好みで。


input[type="radio"]+label:before,

input[type="checkbox"]+label:before{

display: inline-block;

content: "";

vertical-align: top;

background-color: white;

color: black;

border-style: solid;

border-width: 0.1875em;

width: 0.625em;

height: 0.625em;

margin-left: -1em;

margin-top: 0.25em;

margin-right: 0.25em;

}

input[type="radio"]+label:before{

border-radius: 0.5em;

}

input[type="checkbox"]+label:before{

border-radius: 0.1875em;

}


そして、チェックしたときのスタイルを指定する。


input[type="radio"]:checked+label:before,

input[type="checkbox"]:checked+label:before{

border-style: double;

border-width: 0.5em;

width: 0;

height: 0;

}


チェックボックスは次のようにしてもよい。


input[type="checkbox"]:checked+label:before{

content: "\2714";

line-height: 0.625;

}


フォーカス時のスタイルを指定するのも忘れずに。


input[type="radio"]:focus+label:before,

input[type="checkbox"]:focus+label:before{

outline: 1px dotted;

}


outline ではなく box-shadow を使うと、アウトラインをぼかすことができる。色や太さはお好みで。


input[type="radio"]:focus+label:before,

input[type="checkbox"]:focus+label:before{

box-shadow: 0 0 1px 2px orange;

}


以下で動作を確認できる。マウスでもキーボードでも操作できること、ボタンの大きさがフォントサイズに比例していることに注意してほしい。ただし、繰り返しになるが、IE8 以前には対応しない。



[この記事にコメントを書く。] [このカテゴリをまとめて読む。] [最新の記事を読む。]

RSS feed

カテゴリ

[/language] (98)
[/links] (254)
[/mac] (114)
[/music] (36)
[/origami] (406)
[/this_blog/ajax] (7)
[/this_blog/blosxom] (4)
[/this_blog/history] (12)
[/this_blog/perl] (9)

最新記事

パスワードについてのあなたの常識はもはや非常識かもしれない・その1 [/links]
ニューラルネットワークとディープラーニングで翻訳はどうなる・その5 [/language]
ニューラルネットワークとディープラーニングで翻訳はどうなる・その4 [/language]
HTTPS 対応 [/links]
ひらがな・カタカナ学習ウェブアプリ [/links]
日本語の「た」と英語の過去形 [/language]
ORI-REVO で回転楕円体を折る・その2 [/origami]
ORI-REVO で回転楕円体を折る・その1 [/origami]
折り紙建築 [/origami]
折鶴に松図小柄 [/origami]
改訂版・たぶん、ほとんどの人は viewport meta タグの指定をまちがえてる・その6 [/links]
改訂版・たぶん、ほとんどの人は viewport meta タグの指定をまちがえてる・その5 [/links]
改訂版・たぶん、ほとんどの人は viewport meta タグの指定をまちがえてる・その4 [/links]
改訂版・たぶん、ほとんどの人は viewport meta タグの指定をまちがえてる・その3 [/links]
改訂版・たぶん、ほとんどの人は viewport meta タグの指定をまちがえてる・その2 [/links]

羽鳥 公士郎