CSS Multistep Progress Bar

Progress bar of multi step form is hidding behind the white background color of container DIV

In one of your your outer div elements here, you are using background-color:none:

<div class="row">
    <div class="col-md-12">
        <div style="background-color:none;">

At present, this means the unwanted white background from the containing div is what the progress bar line shows.

So instead of setting of nonein that div, set the desired background colour of the progress bar line.

How to implement a multi step progress bar with a positive z-index?

As per the given example, the z-index: -1; is applied to the li::after pseudo-element, which you can increase to a higher value (for example 2).

Now, you need to increase the z-index of li::before pseudo-element to even a higher value (like 3).

Finally you need to set position: relative; to it, as z-index won't work on static elements.

Updated example here

Multi Step Form with Progress Bar using jQuery and CSS3 doesn't work

I copied and pasted, I worked out today what the issue was. The jQuery used in this form requires extended jQuery.UI to work porperly. So I no I had to put in a request to load.

How can I make a series of steps for a progress bar in a multi-step form?

You can try bootstrap multistep form example

//jQuery time

var current_fs, next_fs, previous_fs; //fieldsets

var left, opacity, scale; //fieldset properties which we will animate

var animating; //flag to prevent quick multi-click glitches

$(".next").click(function(){

 if(animating) return false;

 animating = true;

 

 current_fs = $(this).parent();

 next_fs = $(this).parent().next();

 

 //activate next step on progressbar using the index of next_fs

 $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");

 

 //show the next fieldset

 next_fs.show(); 

 //hide the current fieldset with style

 current_fs.animate({opacity: 0}, {

  step: function(now, mx) {

   //as the opacity of current_fs reduces to 0 - stored in "now"

   //1. scale current_fs down to 80%

   scale = 1 - (1 - now) * 0.2;

   //2. bring next_fs from the right(50%)

   left = (now * 50)+"%";

   //3. increase opacity of next_fs to 1 as it moves in

   opacity = 1 - now;

   current_fs.css({

        'transform': 'scale('+scale+')',

        'position': 'absolute'

      });

   next_fs.css({'left': left, 'opacity': opacity});

  }, 

  duration: 800, 

  complete: function(){

   current_fs.hide();

   animating = false;

  }, 

  //this comes from the custom easing plugin

  easing: 'easeInOutBack'

 });

});

$(".previous").click(function(){

 if(animating) return false;

 animating = true;

 

 current_fs = $(this).parent();

 previous_fs = $(this).parent().prev();

 

 //de-activate current step on progressbar

 $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");

 

 //show the previous fieldset

 previous_fs.show(); 

 //hide the current fieldset with style

 current_fs.animate({opacity: 0}, {

  step: function(now, mx) {

   //as the opacity of current_fs reduces to 0 - stored in "now"

   //1. scale previous_fs from 80% to 100%

   scale = 0.8 + (1 - now) * 0.2;

   //2. take current_fs to the right(50%) - from 0%

   left = ((1-now) * 50)+"%";

   //3. increase opacity of previous_fs to 1 as it moves in

   opacity = 1 - now;

   current_fs.css({'left': left});

   previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity});

  }, 

  duration: 800, 

  complete: function(){

   current_fs.hide();

   animating = false;

  }, 

  //this comes from the custom easing plugin

  easing: 'easeInOutBack'

 });

});

$(".submit").click(function(){

 return false;

})

/*custom font*/

@import url(https://fonts.googleapis.com/css?family=Montserrat);

/*basic reset*/

* {

    margin: 0;

    padding: 0;

}

html {

    height: 100%;

    background: #6441A5; /* fallback for old browsers */

    background: -webkit-linear-gradient(to left, #6441A5, #2a0845); /* Chrome 10-25, Safari 5.1-6 */

}

body {

    font-family: montserrat, arial, verdana;

    background: transparent;

}

/*form styles*/

#msform {

    text-align: center;

    position: relative;

    margin-top: 30px;

}

#msform fieldset {

    background: white;

    border: 0 none;

    border-radius: 0px;

    box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);

    padding: 20px 30px;

    box-sizing: border-box;

    width: 80%;

    margin: 0 10%;

    /*stacking fieldsets above each other*/

    position: relative;

}

/*Hide all except first fieldset*/

#msform fieldset:not(:first-of-type) {

    display: none;

}

/*inputs*/

#msform input, #msform textarea {

    padding: 15px;

    border: 1px solid #ccc;

    border-radius: 0px;

    margin-bottom: 10px;

    width: 100%;

    box-sizing: border-box;

    font-family: montserrat;

    color: #2C3E50;

    font-size: 13px;

}

#msform input:focus, #msform textarea:focus {

    -moz-box-shadow: none !important;

    -webkit-box-shadow: none !important;

    box-shadow: none !important;

    border: 1px solid #ee0979;

    outline-width: 0;

    transition: All 0.5s ease-in;

    -webkit-transition: All 0.5s ease-in;

    -moz-transition: All 0.5s ease-in;

    -o-transition: All 0.5s ease-in;

}

/*buttons*/

#msform .action-button {

    width: 100px;

    background: #ee0979;

    font-weight: bold;

    color: white;

    border: 0 none;

    border-radius: 25px;

    cursor: pointer;

    padding: 10px 5px;

    margin: 10px 5px;

}

#msform .action-button:hover, #msform .action-button:focus {

    box-shadow: 0 0 0 2px white, 0 0 0 3px #ee0979;

}

#msform .action-button-previous {

    width: 100px;

    background: #C5C5F1;

    font-weight: bold;

    color: white;

    border: 0 none;

    border-radius: 25px;

    cursor: pointer;

    padding: 10px 5px;

    margin: 10px 5px;

}

#msform .action-button-previous:hover, #msform .action-button-previous:focus {

    box-shadow: 0 0 0 2px white, 0 0 0 3px #C5C5F1;

}

/*headings*/

.fs-title {

    font-size: 18px;

    text-transform: uppercase;

    color: #2C3E50;

    margin-bottom: 10px;

    letter-spacing: 2px;

    font-weight: bold;

}

.fs-subtitle {

    font-weight: normal;

    font-size: 13px;

    color: #666;

    margin-bottom: 20px;

}

/*progressbar*/

#progressbar {

    margin-bottom: 30px;

    overflow: hidden;

    /*CSS counters to number the steps*/

    counter-reset: step;

}

#progressbar li {

    list-style-type: none;

    color: white;

    text-transform: uppercase;

    font-size: 9px;

    width: 33.33%;

    float: left;

    position: relative;

    letter-spacing: 1px;

}

#progressbar li:before {

    content: counter(step);

    counter-increment: step;

    width: 24px;

    height: 24px;

    line-height: 26px;

    display: block;

    font-size: 12px;

    color: #333;

    background: white;

    border-radius: 25px;

    margin: 0 auto 10px auto;

}

/*progressbar connectors*/

#progressbar li:after {

    content: '';

    width: 100%;

    height: 2px;

    background: white;

    position: absolute;

    left: -50%;

    top: 9px;

    z-index: -1; /*put it behind the numbers*/

}

#progressbar li:first-child:after {

    /*connector not needed before the first step*/

    content: none;

}

/*marking active/completed steps green*/

/*The number of the step and the connector before it = green*/

#progressbar li.active:before, #progressbar li.active:after {

    background: #ee0979;

    color: white;

}

/* Not relevant to this form */

.dme_link {

    margin-top: 30px;

    text-align: center;

}

.dme_link a {

    background: #FFF;

    font-weight: bold;

    color: #ee0979;

    border: 0 none;

    border-radius: 25px;

    cursor: pointer;

    padding: 5px 25px;

    font-size: 12px;

}

.dme_link a:hover, .dme_link a:focus {

    background: #C5C5F1;

    text-decoration: none;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

<!-- MultiStep Form -->

<div class="row">

    <div class="col-md-6 col-md-offset-3">

        <form id="msform">

            <!-- progressbar -->

            <ul id="progressbar">

                <li class="active">Personal Details</li>

                <li>Social Profiles</li>

                <li>Account Setup</li>

            </ul>

            <!-- fieldsets -->

            <fieldset>

                <h2 class="fs-title">Personal Details</h2>

                <h3 class="fs-subtitle">Tell us something more about you</h3>

                <input type="text" name="fname" placeholder="First Name"/>

                <input type="text" name="lname" placeholder="Last Name"/>

                <input type="text" name="phone" placeholder="Phone"/>

                <input type="button" name="next" class="next action-button" value="Next"/>

            </fieldset>

            <fieldset>

                <h2 class="fs-title">Social Profiles</h2>

                <h3 class="fs-subtitle">Your presence on the social network</h3>

                <input type="text" name="twitter" placeholder="Twitter"/>

                <input type="text" name="facebook" placeholder="Facebook"/>

                <input type="text" name="gplus" placeholder="Google Plus"/>

                <input type="button" name="previous" class="previous action-button-previous" value="Previous"/>

                <input type="button" name="next" class="next action-button" value="Next"/>

            </fieldset>

            <fieldset>

                <h2 class="fs-title">Create your account</h2>

                <h3 class="fs-subtitle">Fill in your credentials</h3>

                <input type="text" name="email" placeholder="Email"/>

                <input type="password" name="pass" placeholder="Password"/>

                <input type="password" name="cpass" placeholder="Confirm Password"/>

                <input type="button" name="previous" class="previous action-button-previous" value="Previous"/>

                <input type="submit" name="submit" class="submit action-button" value="Submit"/>

            </fieldset>

        </form>

        <!-- link to designify.me code snippets -->

        <div class="dme_link">

            <p><a href="http://designify.me/code-snippets-js/" target="_blank">More Code Snippets</a></p>

        </div>

        <!-- /.link to designify.me code snippets -->

    </div>

</div>

<!-- /.MultiStep Form -->

Multi Step Form with Progress Bar using jQuery and CSS3, input not working in DIV

The jquery is using $.parent() when you click the next button to target the current fieldset and $.parent().next() to target the next fieldset. When you wrap the next button in a div, that div is now the parent - not the fieldset. Just change current_fs and next_fs to find the $.closest('fieldset') instead of using $.parent()

//jQuery time

var current_fs, next_fs, previous_fs; //fieldsets

var left, opacity, scale; //fieldset properties which we will animate

var animating; //flag to prevent quick multi-click glitches

$(".next").click(function(){

 if(animating) return false;

 animating = true;

 

 current_fs = $(this).closest('fieldset');

 next_fs = current_fs.next();

 

 //activate next step on progressbar using the index of next_fs

 $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");

 

 //show the next fieldset

 next_fs.show(); 

 //hide the current fieldset with style

 current_fs.animate({opacity: 0}, {

  step: function(now, mx) {

   //as the opacity of current_fs reduces to 0 - stored in "now"

   //1. scale current_fs down to 80%

   scale = 1 - (1 - now) * 0.2;

   //2. bring next_fs from the right(50%)

   left = (now * 50)+"%";

   //3. increase opacity of next_fs to 1 as it moves in

   opacity = 1 - now;

   current_fs.css({

        'transform': 'scale('+scale+')',

        'position': 'absolute'

      });

   next_fs.css({'left': left, 'opacity': opacity});

  }, 

  duration: 800, 

  complete: function(){

   current_fs.hide();

   animating = false;

  }, 

  //this comes from the custom easing plugin

  easing: 'easeInOutBack'

 });

});

$(".previous").click(function(){

 if(animating) return false;

 animating = true;

 

 current_fs = $(this).parent();

 previous_fs = $(this).parent().prev();

 

 //de-activate current step on progressbar

 $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");

 

 //show the previous fieldset

 previous_fs.show(); 

 //hide the current fieldset with style

 current_fs.animate({opacity: 0}, {

  step: function(now, mx) {

   //as the opacity of current_fs reduces to 0 - stored in "now"

   //1. scale previous_fs from 80% to 100%

   scale = 0.8 + (1 - now) * 0.2;

   //2. take current_fs to the right(50%) - from 0%

   left = ((1-now) * 50)+"%";

   //3. increase opacity of previous_fs to 1 as it moves in

   opacity = 1 - now;

   current_fs.css({'left': left});

   previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity});

  }, 

  duration: 800, 

  complete: function(){

   current_fs.hide();

   animating = false;

  }, 

  //this comes from the custom easing plugin

  easing: 'easeInOutBack'

 });

});

$(".submit").click(function(){

 return false;

})

jQuery.easing.jswing=jQuery.easing.swing;jQuery.extend(jQuery.easing,{def:"easeOutQuad",swing:function(e,f,a,h,g){return jQuery.easing[jQuery.easing.def](e,f,a,h,g)},easeInQuad:function(e,f,a,h,g){return h*(f/=g)*f+a},easeOutQuad:function(e,f,a,h,g){return -h*(f/=g)*(f-2)+a},easeInOutQuad:function(e,f,a,h,g){if((f/=g/2)<1){return h/2*f*f+a}return -h/2*((--f)*(f-2)-1)+a},easeInCubic:function(e,f,a,h,g){return h*(f/=g)*f*f+a},easeOutCubic:function(e,f,a,h,g){return h*((f=f/g-1)*f*f+1)+a},easeInOutCubic:function(e,f,a,h,g){if((f/=g/2)<1){return h/2*f*f*f+a}return h/2*((f-=2)*f*f+2)+a},easeInQuart:function(e,f,a,h,g){return h*(f/=g)*f*f*f+a},easeOutQuart:function(e,f,a,h,g){return -h*((f=f/g-1)*f*f*f-1)+a},easeInOutQuart:function(e,f,a,h,g){if((f/=g/2)<1){return h/2*f*f*f*f+a}return -h/2*((f-=2)*f*f*f-2)+a},easeInQuint:function(e,f,a,h,g){return h*(f/=g)*f*f*f*f+a},easeOutQuint:function(e,f,a,h,g){return h*((f=f/g-1)*f*f*f*f+1)+a},easeInOutQuint:function(e,f,a,h,g){if((f/=g/2)<1){return h/2*f*f*f*f*f+a}return h/2*((f-=2)*f*f*f*f+2)+a},easeInSine:function(e,f,a,h,g){return -h*Math.cos(f/g*(Math.PI/2))+h+a},easeOutSine:function(e,f,a,h,g){return h*Math.sin(f/g*(Math.PI/2))+a},easeInOutSine:function(e,f,a,h,g){return -h/2*(Math.cos(Math.PI*f/g)-1)+a},easeInExpo:function(e,f,a,h,g){return(f==0)?a:h*Math.pow(2,10*(f/g-1))+a},easeOutExpo:function(e,f,a,h,g){return(f==g)?a+h:h*(-Math.pow(2,-10*f/g)+1)+a},easeInOutExpo:function(e,f,a,h,g){if(f==0){return a}if(f==g){return a+h}if((f/=g/2)<1){return h/2*Math.pow(2,10*(f-1))+a}return h/2*(-Math.pow(2,-10*--f)+2)+a},easeInCirc:function(e,f,a,h,g){return -h*(Math.sqrt(1-(f/=g)*f)-1)+a},easeOutCirc:function(e,f,a,h,g){return h*Math.sqrt(1-(f=f/g-1)*f)+a},easeInOutCirc:function(e,f,a,h,g){if((f/=g/2)<1){return -h/2*(Math.sqrt(1-f*f)-1)+a}return h/2*(Math.sqrt(1-(f-=2)*f)+1)+a},easeInElastic:function(f,h,e,l,k){var i=1.70158;var j=0;var g=l;if(h==0){return e}if((h/=k)==1){return e+l}if(!j){j=k*0.3}if(g<Math.abs(l)){g=l;var i=j/4}else{var i=j/(2*Math.PI)*Math.asin(l/g)}return -(g*Math.pow(2,10*(h-=1))*Math.sin((h*k-i)*(2*Math.PI)/j))+e},easeOutElastic:function(f,h,e,l,k){var i=1.70158;var j=0;var g=l;if(h==0){return e}if((h/=k)==1){return e+l}if(!j){j=k*0.3}if(g<Math.abs(l)){g=l;var i=j/4}else{var i=j/(2*Math.PI)*Math.asin(l/g)}return g*Math.pow(2,-10*h)*Math.sin((h*k-i)*(2*Math.PI)/j)+l+e},easeInOutElastic:function(f,h,e,l,k){var i=1.70158;var j=0;var g=l;if(h==0){return e}if((h/=k/2)==2){return e+l}if(!j){j=k*(0.3*1.5)}if(g<Math.abs(l)){g=l;var i=j/4}else{var i=j/(2*Math.PI)*Math.asin(l/g)}if(h<1){return -0.5*(g*Math.pow(2,10*(h-=1))*Math.sin((h*k-i)*(2*Math.PI)/j))+e}return g*Math.pow(2,-10*(h-=1))*Math.sin((h*k-i)*(2*Math.PI)/j)*0.5+l+e},easeInBack:function(e,f,a,i,h,g){if(g==undefined){g=1.70158}return i*(f/=h)*f*((g+1)*f-g)+a},easeOutBack:function(e,f,a,i,h,g){if(g==undefined){g=1.70158}return i*((f=f/h-1)*f*((g+1)*f+g)+1)+a},easeInOutBack:function(e,f,a,i,h,g){if(g==undefined){g=1.70158}if((f/=h/2)<1){return i/2*(f*f*(((g*=(1.525))+1)*f-g))+a}return i/2*((f-=2)*f*(((g*=(1.525))+1)*f+g)+2)+a},easeInBounce:function(e,f,a,h,g){return h-jQuery.easing.easeOutBounce(e,g-f,0,h,g)+a},easeOutBounce:function(e,f,a,h,g){if((f/=g)<(1/2.75)){return h*(7.5625*f*f)+a}else{if(f<(2/2.75)){return h*(7.5625*(f-=(1.5/2.75))*f+0.75)+a}else{if(f<(2.5/2.75)){return h*(7.5625*(f-=(2.25/2.75))*f+0.9375)+a}else{return h*(7.5625*(f-=(2.625/2.75))*f+0.984375)+a}}}},easeInOutBounce:function(e,f,a,h,g){if(f<g/2){return jQuery.easing.easeInBounce(e,f*2,0,h,g)*0.5+a}return jQuery.easing.easeOutBounce(e,f*2-g,0,h,g)*0.5+h*0.5+a}});

/*custom font*/

@import url(http://fonts.googleapis.com/css?family=Montserrat);

/*basic reset*/

* {margin: 0; padding: 0;}

html {

 height: 100%;

 /*Image only BG fallback*/

 

 /*background = gradient + image pattern combo*/

 background: 

  linear-gradient(rgba(196, 102, 0, 0.6), rgba(155, 89, 182, 0.6));

}

body {

 font-family: montserrat, arial, verdana;

}

/*form styles*/

#msform {

 width: 400px;

 margin: 50px auto;

 text-align: center;

 position: relative;

}

#msform fieldset {

 background: white;

 border: 0 none;

 border-radius: 3px;

 box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);

 padding: 20px 30px;

 box-sizing: border-box;

 width: 80%;

 margin: 0 10%;

 

 /*stacking fieldsets above each other*/

 position: relative;

}

/*Hide all except first fieldset*/

#msform fieldset:not(:first-of-type) {

 display: none;

}

/*inputs*/

#msform input, #msform textarea {

 padding: 15px;

 border: 1px solid #ccc;

 border-radius: 3px;

 margin-bottom: 10px;

 width: 100%;

 box-sizing: border-box;

 font-family: montserrat;

 color: #2C3E50;

 font-size: 13px;

}

/*buttons*/

#msform .action-button {

 width: 100px;

 background: #27AE60;

 font-weight: bold;

 color: white;

 border: 0 none;

 border-radius: 1px;

 cursor: pointer;

 padding: 10px 5px;

 margin: 10px 5px;

}

#msform .action-button:hover, #msform .action-button:focus {

 box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;

}

/*headings*/

.fs-title {

 font-size: 15px;

 text-transform: uppercase;

 color: #2C3E50;

 margin-bottom: 10px;

}

.fs-subtitle {

 font-weight: normal;

 font-size: 13px;

 color: #666;

 margin-bottom: 20px;

}

/*progressbar*/

#progressbar {

 margin-bottom: 30px;

 overflow: hidden;

 /*CSS counters to number the steps*/

 counter-reset: step;

}

#progressbar li {

 list-style-type: none;

 color: white;

 text-transform: uppercase;

 font-size: 9px;

 width: 33.33%;

 float: left;

 position: relative;

}

#progressbar li:before {

 content: counter(step);

 counter-increment: step;

 width: 20px;

 line-height: 20px;

 display: block;

 font-size: 10px;

 color: #333;

 background: white;

 border-radius: 3px;

 margin: 0 auto 5px auto;

}

/*progressbar connectors*/

#progressbar li:after {

 content: '';

 width: 100%;

 height: 2px;

 background: white;

 position: absolute;

 left: -50%;

 top: 9px;

 z-index: -1; /*put it behind the numbers*/

}

#progressbar li:first-child:after {

 /*connector not needed before the first step*/

 content: none; 

}

/*marking active/completed steps green*/

/*The number of the step and the connector before it = green*/

#progressbar li.active:before,  #progressbar li.active:after{

 background: #27AE60;

 color: white;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!DOCTYPE html>

<html >

<head>

  <meta charset="UTF-8">

  <title>Multi Step Form with Progress Bar using jQuery and CSS3</title>

      <link rel="stylesheet" href="css/style.css">

</head>

<body>

  <!-- multistep form -->

<form id="msform">

  <!-- progressbar -->

  <ul id="progressbar">

    <li class="active">Account Setup</li>

    <li>Social Profiles</li>

    <li>Personal Details</li>

  </ul>

  <!-- fieldsets -->

  <fieldset>

    <h2 class="fs-title">Create your account</h2>

    <h3 class="fs-subtitle">This is step 1</h3>

    <input type="text" name="email" placeholder="Email" />

    <input type="password" name="pass" placeholder="Password" />

    <input type="password" name="cpass" placeholder="Confirm Password" />

      

        <button type="button" class="next action-button btn btn-primary">

        Next Step WORKING </button>                

      <hr/> 

      <div class="pull-right">

        <button type="button" class="next action-button btn btn-primary">

        Next Step NOT WORKING </button>                

      </div>  

  </fieldset>

  <fieldset>

    <h2 class="fs-title">Social Profiles</h2>

    <h3 class="fs-subtitle">Your presence on the social network</h3>

    <input type="text" name="twitter" placeholder="Twitter" />

    <input type="text" name="facebook" placeholder="Facebook" />

    <input type="text" name="gplus" placeholder="Google Plus" />

    <input type="button" name="previous" class="previous action-button" value="Previous" />

    <input type="button" name="next" class="next action-button" value="Next" />

      <div class="pull-left">

        <button type="button" class="previous action-button btn btn-primary">previous NOT WORKING </button>                

      </div> 

      <div class="pull-right">

        <button type="button" class="next action-button btn btn-primary">

        Next Step NOT WORKING </button>                

      </div>     

  </fieldset>

  <fieldset>

    <h2 class="fs-title">Personal Details</h2>

    <h3 class="fs-subtitle">We will never sell it</h3>

    <input type="text" name="fname" placeholder="First Name" />

    <input type="text" name="lname" placeholder="Last Name" />

    <input type="text" name="phone" placeholder="Phone" />

    <textarea name="address" placeholder="Address"></textarea>

    <input type="button" name="previous" class="previous action-button" value="Previous" />

    <input type="submit" name="submit" class="submit action-button" value="Submit" />

  </fieldset>

</form>

</body>

</html>

---

Related Topics