【labelタグ】Input checkboxの横の文字をCSSで装飾する【初心者向け】

コーディング
スポンサーリンク

チェックボックスのテキスト部分を装飾したい

一番シンプルな基本のチェックボックスのコードです。
チェックボックス横のテキストにタグがないという不思議な構造です。

See the Pen
VwjZwWB
by nzm (@nzm)
on CodePen.

このままでも使えることは使えますが、文字の大きさや余白の調整、色を変えたい時にはCSSでスタイルを変更しなければなりません。
今回はこのチェックボックスと書かれているテキスト部分をCSSで装飾していきます。

 

全体をlabelタグで囲んでテキスト部分にタグを付ける

テキスト部分の色を赤に変えて、太字に変えてみます。

CSSで装飾できるようにタグを付ける必要があります。
今回はspanタグで囲んでCSSで装飾します。(クラスを付けてもOKですね)

See the Pen
wvWwBKW
by nzm (@nzm)
on CodePen.

ただテキスト部分にタグを付ければOKというわけではなくlabelタグで囲む必要があります。

同様に余白を付けたり文字を大きくしたり、思い通りにCSSでカスタマイズすることができます。

labelタグはスマホサイズでは必須

labelタグが無くてもinputのチェックボックスとして機能はしますが、チェックボックスの箱の部分までカーソルを持っていかないとチェックができません。

チェックボックスは小さいので、スマホの時にタッチしづらい可能性があるので、labelタグで囲んでテキスト部分もタッチ可能します。
これだけでだいぶストレスが無くなります。

See the Pen
3
by nzm (@nzm)
on CodePen.

コメント

タイトルとURLをコピーしました