フォームのチェックボックスやラジオボタンを、CSSでサイズ変更する方法のご紹介です。
チェックボックスを拡大表示するサンプル
まずはチェックボックスのCSSの記述例です。チェックボックスのwidthやheightの値と合わせて、CSS3のtransformを使って表示サイズを調整してあげます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
input[type="checkbox"].scale1 { -webkit-transform: scale(1); -webkit-transform-origin:0 0; -moz-transform: scale(1); -moz-transform-origin:0 0; -ms-transform: scale(1); -ms-transform-origin:0 0; width:20px; width:20px; vertical-align:middle; } input[type="checkbox"].scale2 { -webkit-transform: scale(2); -webkit-transform-origin:100% 50%; -moz-transform: scale(2); -moz-transform-origin:100% 50%; -ms-transform: scale(2); -ms-transform-origin:100% 50%; width:20px; height:20px; vertical-align: middle; } |
↓このような感じでチェックボックスを拡大表示させることができます。
ラジオボタンを拡大表示するサンプル
続いてラジオボタンのスタイル例です。|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
input[type="radio"].scale1 { -webkit-transform: scale(1); -webkit-transform-origin:0 0; -moz-transform: scale(1); -moz-transform-origin:0 0; -ms-transform: scale(1); -ms-transform-origin:0 0; width:20px; width:20px; vertical-align:middle; } input[type="radio"].scale2 { -webkit-transform: scale(2); -webkit-transform-origin:100% 50%; -moz-transform: scale(2); -moz-transform-origin:100% 50%; -ms-transform: scale(2); -ms-transform-origin:100% 50%; width:20px; height:20px; vertical-align: middle; } |
↓ラジオボタンの見え方もこのようになります。
transform:scale()で要素の拡大縮小を、transform-originで基準点をそれぞれ指定します。
なお、FirefoxとGoogle Chrome、Internet Explorerの各ブラウザで異なったサイズで表示されることもありますので、transformの値だけでなく、width やheight、vertical-alignなどの値も適宜調整する必要があります。
コメント