[CSS] ラジオボタンやチェックボックスのサイズを変更する
ラジオボタンやチェックボックスのサイズを標準サイズよりも大きくしたり小さくしたりするには、CSSの「transform:scale()」を使用します。
サンプル
例）ラジオボタンのサイズを変更する
|
1 2 3 |
<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);"> たぬき |
いぬ
ねこ
たぬき
ねこ
たぬき
例）チェックボックスのサイズを変更する
|
1 2 3 |
<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を指定します。