CSSでトグルボタンの作り方メモ。
【CSS】トグルボタンの作り方
先日CSSでトグルボタンを作る機会があったので備忘録メモ。
トグルボタンってのはこんなやつです↓
See the Pen toggle button by nkmr (@nkmr_whoo) on CodePen.
正体としてはチェックボックスなんですね。
input の『id』と labelの『for』を紐付けて『チェックが入った＆外れた』でスタイルを変更すれば完成です。
その際、input は何かしらの方法で見えなくすればOK。
まとめ
フォーム周りでCSSを当てなきゃいけないケースは大体この『デフォルト（input）を隠して label（と擬似要素）にスタイリング』の方法が適用できる気がしますね。
input にチェックが入ってもスタイルが変わらなかったら↓が原因かもしれないので確認してみよう！
