HTMLラジオボタンを大きくする方法について

C17: テキストを含むフォームの要素を拡大する | WCAG 2.0 達成方法集原文)には、

この事例は、テキストサイズ機能のある IE で動作する。しかしながら、Firefox 2.0 では拡大されない。

XHTML コンポーネント:

<input type="radio" name="r1" value="r1" id="r1" class="geomsize" />
<input type="checkbox" name="c1" id="c1" value="c1" class="geomsize" />

CSS コンポーネント:

input.geomsize {
width: 1.2em;
height: 1.2em;}

という具合の実装方法が記載されている。まあ、最初はFirefox 2.0とかいつの時代の話なんだ、とか突っ込んでましたが、Firefox 53.0.2 (Windows 10)でもやっぱり動作しない(というかWebKit (Bash on Ubuntu on Windowsepiphany-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内部の処理に関する言及をいただいている。併せて参照されたい。