フォームのステップ CSSデザインサンプル 3選
フォームに使われているステップを表記するCSSのデザインサンプルです。
特徴
- レスポンシブ対応
- ステップ名変更可
- 色変更可
ドットタイプ
今どの段階にいるのかをドットで表現したタイプ。
See the Pen
css form-step01 by Aquarium (@aquarium)
on CodePen.
HTML&CSS
See the Pen
css form-step01 by Aquarium (@aquarium)
on CodePen.
ドットタイプ 番号付き
番号付きでさらに全体を把握しやくすなりました。
See the Pen
css form-step02 by Aquarium (@aquarium)
on CodePen.
HTML&CSS
See the Pen
css form-step02 by Aquarium (@aquarium)
on CodePen.
矢印タイプ
ステップの流れを矢印で表したタイプ
See the Pen
form-step03 by Aquarium (@aquarium)
on CodePen.
See the Pen
form-step03 by Aquarium (@aquarium)
on CodePen.
