CODEPREP | HTMLとCSS3でつくるトグルスイッチのメモです。

---

外枠の角を丸くする

• border-radiusで、heightの半分を指定することで、半円を作ることができる

チェックボックスがチェックされている状態

• 擬似セレクタ:checkedで指定できる

すぐ隣にある要素を指定する

• 隣接セレクタ+で指定する

スイッチをアニメーションさせる

• transformで設定した効果に対して、transition-durationプロパティを利用することでアニメーションの時間効果を調整できる

ラベルテキストを描画エリア外に移動する

• text-indentプロパティは、要素のテキストコンテンツの先頭行の初めにどのぐらいの水平スペースを挿入するかを指定する
• text-indent: -9999pxとすることで、描画エリア外までインデントすることができる
• text-indent - CSS: カスケーディングスタイルシート | MDN

• スイッチがクリックされている状態の時に一時的に横幅を広げることで、このような ぬるっと 動くように見える

  • 横幅を広げるには、要素:active::after { width: 60%; }のように、クリックされている状態に::after擬似要素を使ってwidthを追加すればいい