- Title of past step
- Title of active step
- Title of future step
- Title of future step
- Title of future step
Forms
Form Multiple Steps 
- Class name: (k-form-steps)
- Version: 1.0
You may use form steps to divide your forms in multiple pages.
HTML5 Plain Code
-
<ol class="k-form-steps">
-
<li class="past">Title of past step</li>
-
<li class="active" aria-label="Current step">Title of active step</li>
-
<li>Title of future step</li>
-
<li>Title of future step</li>
-
<li>Title of future step</li>
-
</ol>
CSS Code
-
ol.k-form-steps {
-
display: flex;
-
-moz-display: flex;
-
-webkit-display: flex;
-
flex-flow: column;
-
-webkit-flex-flow: column;
-
flex-direction: column;
-
position: relative;
-
clear: both;
-
counter-reset: step;
-
margin: 1em 0;
-
}
-
ol.k-form-steps li {
-
position: relative;
-
-webkit-flex: 1 1 auto;
-
flex: 1 1 auto;
-
list-style-type: none;
-
font: 0.9em /1 open_sanslight, "Gill Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
-
color: #B7B7B7;
-
background: #EEE;
-
padding: 0.5em 0.7em;
-
margin: 1rem 0.5rem 0 0;
-
}
-
ol.k-form-steps li::before {
-
display: inline-block;
-
width: 1.5em;
-
height: 1.5em;
-
line-height: 1.5em;
-
font-size: 1.3em;
-
content: counter(step);
-
counter-increment: step;
-
text-align: center;
-
color: #EEE;
-
background: #D1D1D1;
-
margin-right: 1rem;
-
border-radius: 1.5em;
-
}
-
ol.k-form-steps li.past {
-
color: #050505;
-
background: #EEE;
-
}
-
ol.k-form-steps li.past::before {
-
color: #EEE;
-
background: #050505,
-
}
-
ol.k-form-steps li.active {
-
color: #A40800;
-
border: 1px solid #eee
-
}
-
ol.k-form-steps li.active::before {
-
color: #EEE;
-
background: #A40800
-
}
-
@media screen and (min-width: 790px) {
-
ol.k-form-steps {
-
display: flex;
-
-moz-display: flex;
-
-webkit-display: flex;
-
flex-flow: row;
-
-webkit-flex-flow: row;
-
flex-direction: row;
-
}
-
ol.k-form-steps li {
-
text-align: center;
-
}
-
ol.k-form-steps li::before {
-
display: block;
-
margin: 0 auto 5px;
-
}
-
}
IE Backward Compatibility
In order to correct display bugs for Internet Explorer versions prior to 9, your html pages need to call the following file by Conditional Comments: