スポンサード

フォームのチェックボックスやラジオボタンを、CSSでサイズ変更する方法のご紹介です。

チェックボックスを拡大表示するサンプル

まずはチェックボックスのCSS の記述例です。

チェックボックスのwidth やheight の値と合わせて、CSS3 のtransform を使って表示サイズを調整してあげます。

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;
}

↓このような感じでチェックボックスを拡大表示させることができます。

scale1　scale2

ラジオボタンを拡大表示するサンプル

続いて、ラジオボタンのスタイル例です。

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;
}

↓ラジオボタンの見え方もこのようになります。

scale1　scale2

transform:scale() で要素の拡大縮小を、transform-origin で基準点をそれぞれ指定します。
なお、Firefox とGoogle Chrome、Internet Explorer の各ブラウザで異なったサイズで表示されることもありますので、transform の値だけでなく、width やheight、vertical-align などの値も適宜調整する必要があります。

スポンサード