[CSS] ラジオボタンやチェックボックスのサイズを変更する

CSS

2020.01.23

ラジオボタンやチェックボックスのサイズを標準サイズよりも大きくしたり小さくしたりするには、CSSの「transform:scale()」を使用します。

サンプル

例）ラジオボタンのサイズを変更する

<input type="radio" name="rdo1" value="1" style="transform:scale(1.0); checked"> いぬ
<input type="radio" name="rdo1" value="2" style="transform:scale(2.0);"> ねこ
<input type="radio" name="rdo1" value="3" style="transform:scale(3.0);"> たぬき

<input type="radio" name="rdo1" value="1" style="transform:scale(1.0); checked"> いぬ

<input type="radio" name="rdo1" value="2" style="transform:scale(2.0);"> ねこ

<input type="radio" name="rdo1" value="3" style="transform:scale(3.0);"> たぬき

　いぬ
　ねこ
　たぬき

例）チェックボックスのサイズを変更する

<input type="checkbox" value="1" style="transform:scale(1.0);"> あいう
<input type="checkbox" value="2" style="transform:scale(2.0);"> あいう
<input type="checkbox" value="3" style="transform:scale(3.0);"> あいう

<input type="checkbox" value="1" style="transform:scale(1.0);"> あいう

<input type="checkbox" value="2" style="transform:scale(2.0);"> あいう

<input type="checkbox" value="3" style="transform:scale(3.0);"> あいう

　いぬ
　ねこ
　たぬき

備考

transform:scale() の引数に倍率を指定します。
標準サイズは1.0、1.5倍のサイズにしたい場合は1.5、2倍のサイズにしたい場合は2.0を指定します。