C17: テキストを含むフォームの要素を拡大する | WCAG 2.0 達成方法集(原文)には、
この事例は、テキストサイズ機能のある IE で動作する。しかしながら、Firefox 2.0 では拡大されない。
<input type="radio" name="r1" value="r1" id="r1" class="geomsize" /> <input type="checkbox" name="c1" id="c1" value="c1" class="geomsize" />input.geomsize { width: 1.2em; height: 1.2em;}
という具合の実装方法が記載されている。まあ、最初はFirefox 2.0とかいつの時代の話なんだ、とか突っ込んでましたが、Firefox 53.0.2 (Windows 10)でもやっぱり動作しない(というかWebKit (Bash on Ubuntu on Windowsのepiphany-browser)でも動作しないようだ)。こんなアレなコード例があるのが達成方法集なのだけども、このままなのは癪だというのがこの記事の主旨(?)だったりする。
でまあ適当に検索すると、ラジオボタン・チェックボックスの大きさをCSSで変更する方法 - Qiitaとか出てきて、
input[type="radio"] , input[type="checkbox"]{ -webkit-transform: scale(1.5); transform: scale(1.5); margin-right: 0.5em; }
という具合にtransform CSSを使えばどのブラウザーでもボタンを大きくすることができるようだ(綺麗に拡大できるとは言っていない)。
さらにHTML フォームへの高度なスタイル設定 - ウェブ開発を学ぶ | MDNでは、
<span><input type="checkbox"></span>
span { display: inline-block; } input[type=checkbox] { width : 100px; height: 100px; }
とすればFirefoxでも大きくできるようなことが示唆されているが、再現されなかった。
もっと賢いやり方があるかもしれないので、こういうのはどうか、というのがある人は是非教えて欲しい。
最後にcodepenを貼っておくので、各種環境で確かめてみるとよいだろう。
See the Pen mmLNMq by Momdo Nakamura (@momdo) on CodePen.
追記:
Mozillaの中野さんからFirefox内部の処理に関する言及をいただいている。併せて参照されたい。
解決策は、ブラウザがネイティブのL&Fを捨てる、か、各OSが任意のサイズでwidgetを描画できるTheme APIを用意するかの二択ですね。
— なかのん&マジック (@d_toybox) 2017年5月17日