iPhoneの Safari で checkbox をデカく表示する。

チェックボックス、いわゆる ←これなのですが、こいつのサイズを変更したい。

フォントサイズを大きめに設定していると、checkboxのサイズと文字サイズがアンバランスになってしまいます。

手許の Firefox だったら、
<input type="checkbox" style="width: 40px; height: 40px;" />
などとスタイル指定してやると、チェックボックスはきちんとそのサイズになってくれるのだけれど、Safari や Chrome などの webKit 系ブラウザでは、この設定だとダメ。ボックスそのものの大きさは変わらずに、width, height で指定したサイズ分の空白領域が確保されてしまいます。

ではどうするか。

色々調べたけれど、transform を使って拡大してやるしかないみたい。
<input type="checkbox" style="-webkit-transform-origin: right bottom; -webkit-transform: scale( 2 , 2 );">
これで、webKit系ブラウザで閲覧したときに、チェックボックスの右下の角を基点として縦横それぞれ 2倍の大きさに拡大されます。

　　→【参考】CSS3 変形処理を行う transform プロパティ｜CSS Lecture


iPhone専用ページだったら、これだけのスタイル設定で充分。スタイルをタグ部分に直接記述するのが嫌らしいときは、
<style>
input[type=checkbox] {
  -webkit-transform-origin: right bottom;
  -webkit-transform: scale( 2 , 2 );
}
</style>
と、こうなるらしい。

　　→【参考】css - checkbox size in safari?｜Stack Overflow（英語）


Firefoxで見ても、Chrome や Safari から見ても大丈夫なようにするときは、
<style>
input[ type=checkbox ] {
  -moz-transform-origin: right bottom;
  -moz-transform: scale( 2 , 2 );
  -webkit-transform-origin: right bottom;
  -webkit-transform: scale( 2 , 2 );
}
</style>
…と、こんな感じだろうかな。IEは知らん。

カテゴリ:

タグ: