ミギムキ

[CSS] フォームの入力ステップを表示したい

サンプルコード

html

<ol class="form_step"> <li class="form_step_now">入力</li> <li>内容確認</li> <li>送信</li> <li>送信完了</li> </ol>
スポンサー広告

CSS

.form_step { display: flex; justify-content: center; align-items: center; list-style: none; } .form_step > li { display: block; position: relative; padding: 1em; width: 22%; border: 1px solid currentColor; font-size: 1.5vw; font-weight: bold; text-align: center; color: #3388dd; } .form_step > li:nth-of-type(n + 2) { margin: 0px 0px 0px 4%; } .form_step > li:nth-of-type(n + 2):before { position: absolute; top: 50%; left: -1.5em; width: 0.5em; height: 0.5em; border-top: 2px solid #3388dd; border-left: 2px solid #3388dd; transform: translateY(-50%) rotate(135deg); content: ""; } .form_step > li.form_step_now{ color: #fff; background-color: #3388dd; } @media print, (min-width: 992px) { .form_step > li { font-size: 18px; } }

仕組み、解説、補足など

スポンサー広告