【CSS】トグルボタンの作り方

CSSでトグルボタンの作り方メモ。

【CSS】トグルボタンの作り方

先日CSSでトグルボタンを作る機会があったので備忘録メモ。

トグルボタンってのはこんなやつです↓

See the Pen toggle button by nkmr (@nkmr_whoo) on CodePen.

正体としてはチェックボックスなんですね。

input の『id』と labelの『for』を紐付けて『チェックが入った&外れた』でスタイルを変更すれば完成です。

その際、input は何かしらの方法で見えなくすればOK。

まとめ

フォーム周りでCSSを当てなきゃいけないケースは大体この『デフォルト(input)を隠して label(と擬似要素)にスタイリング』の方法が適用できる気がしますね。

input にチェックが入ってもスタイルが変わらなかったら↓が原因かもしれないので確認してみよう!

CSS設計を学びたいならダントツで分かりやすくてオススメ▼