チェックボックスを大きくする方法

お問い合わせフォームの最後に「●●に同意して送信する」チェック!
みたいなチェックボックスをつけたんですが、
表示させてみたら、、ちっちゃ!ボックスちっちゃ!クリックしにくいやろ!
しかも背景が細かいタイルみたいな感じだったのであんまりちっちゃくても見づらいなーー
ということでCSSで

input[type=”checkbox”] { width: 20px; height: 20px; }

これでええやろ!と思ったら、全然大きさかわらない!
Google先生にお聞きしたところ、ブラウザ依存なので一発で変えられるわけじゃなさそう。
そもそも全部をCSSで見た目変えちゃうっていう方法も見つけたんですが、
さらっとちょっと大きくなってくれればよかったので下記の方法で対処。

Chromeの場合は

-webkit-transform-origin: right bottom;
-webkit-transform: scale( 2 , 2 );

Firefoxの場合は

-moz-transform-origin: right bottom;
-moz-transform: scale( 2 , 2 );

でいけました。というかChromeはwidth、heightで変えられるってことだったんだけど、できなかったなーー

こちらのサイトを参考にさせていただきました。

チェックボックスやラジオボタンを大きくする方法

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

top