今回はチェックボックスの装飾を3つご紹介します。
そんなに凝った装飾は必要ないけど、少しアレンジしたいなーという時に使えるかと思います。
目次
装飾はいらないけど、デフォルトのチェックボックスのサイズを大きくする方法も記載します。
input[type=checkbox] {
transform: scale(1.5);
}
たったこれだけです。
デフォルトサイズ
チェックボックス1.5倍
いかがだったでしょうか。
ちょっとした工夫でいろいろ楽しめそうですね。
label要素とは、フォーム部品とラベルを関連付けることができます。 label要素で関連付けることで、ラベル部分のクリックでも選択できるようになります。
for属性は、ラベルを関連付ける対象である要素のid属性値を指定する属性です。
"sampleID"というラベルでチェックボックスと関連付け
<label for="sampleID">選択肢：猫</label>
<input type="checkbox" name="選択肢" value="猫" id="sampleID">
画像クリックでもチェックボックスが反応するようになります。
猫田 ねこ
パチンコ店勤務からweb制作会社へ転職という異色の経歴。漫画大好き。アニメ大好き。パチンコ大好きな、ねこです。
【CSS】背景に入れたグラデーションが動く
【CSS】placeholderの文字色を変更する方法
WordPressのテーマ自作（テーマの作成、テーマの詳細）
