• RSS

[CSS]CSS でチェックボックスやラジオボタンを大きく表示する方法

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

フォームのチェックボックスやラジオボタンを、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 などの値も適宜調整する必要があります。



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください