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

PC版へ 2012年02月24日
チェックボックス、いわゆる ←これなのですが、こいつのサイズを変更したい。

フォントサイズを大きめに設定していると、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は知らん。

関連記事

コメント

現在、コメント機能は停止しています。