KAWWA Markup Pattern Library


Forms

Form Multiple Steps Component Information

  • Class name: (k-form-steps)
  • Version: 1.0

Add to list

You may use form steps to divide your forms in multiple pages.

  1. Title of past step
  2. Title of active step
  3. Title of future step
  4. Title of future step
  5. Title of future step

HTML5 Plain Code

COPY
  1. <ol class="k-form-steps">
  2. 	<li class="past">Title of past step</li>
  3. 	<li class="active" aria-label="Current step">Title of active step</li>
  4. 	<li>Title of future step</li>
  5. 	<li>Title of future step</li>
  6. 	<li>Title of future step</li>
  7. </ol>

CSS Code

COPY
  1. ol.k-form-steps {
  2. 	display: flex;
  3. 	-moz-display: flex;
  4. 	-webkit-display: flex;
  5. 	flex-flow: column;
  6. 	-webkit-flex-flow: column;
  7. 	flex-direction: column;
  8. 	position: relative;
  9. 	clear: both;
  10. 	counter-reset: step;
  11. 	margin: 1em 0;
  12. }
  13. 
                                
  14. ol.k-form-steps li {
  15. 	position: relative;
  16. 	-webkit-flex: 1 1 auto;
  17. 	flex: 1 1 auto;
  18. 	list-style-type: none;
  19. 	font: 0.9em /1 open_sanslight, "Gill Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  20. 	color: #B7B7B7;
  21. 	background: #EEE;
  22. 	padding: 0.5em 0.7em;
  23. 	margin: 1rem 0.5rem 0 0;
  24. }
  25. ol.k-form-steps li::before {
  26. 	display: inline-block;
  27. 	width: 1.5em;
  28. 	height: 1.5em;
  29. 	line-height: 1.5em;
  30. 	font-size: 1.3em;
  31. 	content: counter(step);
  32. 	counter-increment: step;
  33. 	text-align: center;
  34. 	color: #EEE;
  35. 	background: #D1D1D1;
  36. 	margin-right: 1rem;
  37. 	border-radius: 1.5em;
  38. }
  39. ol.k-form-steps li.past {
  40. 	color: #050505;
  41. 	background: #EEE;
  42. }
  43. ol.k-form-steps li.past::before {
  44. 	color: #EEE;
  45. 	background: #050505,
  46. }
  47. ol.k-form-steps li.active {
  48. 	color: #A40800;
  49. 	border: 1px solid #eee
  50. }
  51. ol.k-form-steps li.active::before {
  52. 	color: #EEE;
  53. 	background: #A40800
  54. }
  55. 
                                
  56. @media screen and (min-width: 790px) {
  57. 	ol.k-form-steps {
  58. 		display: flex;
  59. 		-moz-display: flex;
  60. 		-webkit-display: flex;
  61. 		flex-flow: row;
  62. 		-webkit-flex-flow: row;
  63. 		flex-direction: row;
  64. 	}
  65. 	ol.k-form-steps li {
  66. 		text-align: center;
  67. 	}
  68. 	ol.k-form-steps li::before {
  69. 		display: block;
  70. 		margin: 0 auto 5px;
  71. 	}
  72. }
  73. 
                                
  74. 
                                

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:

Top


List of Components

Top

jQuery Feature
jQuery Interactive Feature
Tapestry Integration
Tapestry integration
AngularJS Feature
AngularJS Feature

Navigation

Forms

Tables

Blocks

Site Utilities

Editorial

eCommerce