E-Loket wizard stappen

by lankarden

HTML

<div>
    <ul class="steps">
        <li class="past"><span>Identificatie</span>
        </li>
        <li class="present"><strong>Invullen gegevens</strong>
        </li>
        <li class="future"><span>Overzicht</span>
        </li>
        <li class="future"><span>Afgewerkt</span>
        </li>
    </ul>
    <br>
</div>

CSS

/* steps */
 ul.steps {
    width: auto;
    list-style-type: none;
    padding: 0;
    margin: 15px 0 15px 21px;
    color: Black;
}
ul.steps li {
    float: left;
    width: auto;
    padding: 0 0 0 20px;
}
ul.steps li span, ul.steps li strong {
    display: block;
    height: 25px;
    line-height: 25px;
    font-weight: normal;
    padding: 0 15px 0 15px;
    background-color: rgb(136, 136, 169);
}
ul.steps li span a {
    display: block;
    height: 25px;
    line-height: 25px;
    text-decoration: none;
}
/* Past step */
 ul.steps li.past span {
    background-color: Gray;
}
/* Present step */
 ul.steps li.present span, ul.steps li.present strong {
    background-color: #ADE0B3;
    font-weight: bold;
}
/* Future step */
 ul.steps li.future span {
    background-color: #8888A9;
}