All geek questions in one place

Styling Multi Stage

I am using a form page that has several steps in it. I want to create something like this alt text

the upper part, i.e. Step1, step2, etc. how to do it with CSS

+3
source share
2 answers

An easy way would be to make a css-sprite of all possible states of the step and make it one background (with or without rounded corners), set it to a div containing all the steps. change it depending on state (specify the class). float steps that licontain them in the parent element.

+1
source

The basic structure of HTML:

<ul id="steps">
  <li class="visited"><a href="#"><span>Step 1</span><span>description</span></a></li>
  <li class="visited"><a href="#"><span>Step 2</span><span>description</span></a></li>
  <li class="current"><a href="#"><span>Step 3</span><span>description</span></a></li>
  <li class="upcoming"><a href="#"><span>Step 4</span><span>description</span></a></li>
  <li class="upcoming"><a href="#"><span>Step 5</span><span>description</span></a></li>
</ul>

Then you can use the css selector li.visited, li.current, li.upcoming to select the li nodes and their style accordingly.

0
source

Source: https://habr.com/ru/post/1756510/

More articles:


All Articles