チェックボックスのサイズを1行で簡単に変更する方法

チェックボックス(checkbox)のデフォルトのサイズは小さくてチェックしにくいですよね。

ここでは、1行コードを付け足すだけで、 チェックボックスサイズ変更できる方法を紹介します。

「transform」プロパティを使用する

「transform」プロパティは要素を変形させたい場合に使用します。

次のように指定すると 1.4 倍の大きさとなります。


transform: scale(1.4);

チェックボックスのサイズを変更してみる

デフォルトサイズ

まずはデフォルトサイズのチェックボックスです。

デフォルトサイズ

1.4倍サイズ

次は「transform: scale(1.4);」を指定したチェックボックスです。

1.4倍サイズ

このサイズなら、デフォルトサイズよりもチェックしやすくなりますね。

大きくしたチェックボックスのコードは次の通りです。


<p><input type="checkbox" value"" class="big"> 1.4倍サイズ</p>

<style>
input.big {
	transform: scale(1.4);
}
</style>

このように、「transform」プロパティを使用することで、 簡単にチェックボックスのサイズを変更できます。

スポンサードサーチ

シェアする

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

フォローする