HTML CSS Stepper: A Clean and Simple Design

Question

HTML CSS Stepper: A Clean and Simple Design

I'm having trouble with a progress bar that I've been working on.

My goal is to have the progress bar change its background color to blue before it's set to the "active" class. However, currently, the change in color only happens after the class is set to "active."

Below is my HTML code:

<ul class="progressBar">
  <li class="active">Processing Order</li>
  <li class="active">Payment Pending</li>
  <li>Payment Received</li>
</ul>

And here is the CSS code:

.progressBar li.active {
  color: dodgerblue;
}
.progressBar li.active:before {
  border-color: dodgerblue;
  background-color: dodgerblue
}
.progressBar li.active + li:after {
  background-color: dodgerblue;
}

Current Result:

https://i.sstatic.net/fC2qd.png

Desired Outcome:

https://i.sstatic.net/He5Qw.png

Here is the link to the code snippet for reference.

html css stepper

Answer 1

Answer №1

Try using .progressBar .active:after rather than

.progressBar li.active + li:after

Explanation about the "+" in CSS

The plus sign (+) is known as the Adjacent sibling combinator in CSS. It is used to select elements that are immediately preceded by a certain element.

.container-progressBar {
    width: 100%
}

.progressBar {
}

.progressBar li {
    list-style-type: none;
    float: left;
    width: 33%;
    position: relative;
    text-align: center;
}

.progressBar li:before {
    content: " ";
    line-height: 30px;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    border: 1px solid #ddd;
    display: block;
    text-align: center;
    margin: 0 auto 10px;
    background-color: white
}

.progressBar li:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 4px;
    background-color: #ddd;
    top: 15px;
    left: -50%;
    z-index: -1;
}

.progressBar li:first-child:after {
    content: none;
}

.progressBar li.active {
    color: dodgerblue;
}

.progressBar li.active:before {
    border-color: dodgerblue;
    background-color: dodgerblue
}

.progressBar .active:after {
    background-color: dodgerblue;
}

<div class="row">
  <div class="col-xs-12 col-md-8 offset-md-2 section border">
    <div class="container-progressBar">
      <ul class="progressBar">
        <li class="active">Processing</li>
        <li class="active">Awaiting shipment</li>
        <li>Shipped</li>
      </ul>
    </div>
  </div>
</div>

Answer 2

Try using .progressBar .active:after rather than

.progressBar li.active + li:after

Explanation about the "+" in CSS

The plus sign (+) is known as the Adjacent sibling combinator in CSS. It is used to select elements that are immediately preceded by a certain element.

.container-progressBar {
    width: 100%
}

.progressBar {
}

.progressBar li {
    list-style-type: none;
    float: left;
    width: 33%;
    position: relative;
    text-align: center;
}

.progressBar li:before {
    content: " ";
    line-height: 30px;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    border: 1px solid #ddd;
    display: block;
    text-align: center;
    margin: 0 auto 10px;
    background-color: white
}

.progressBar li:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 4px;
    background-color: #ddd;
    top: 15px;
    left: -50%;
    z-index: -1;
}

.progressBar li:first-child:after {
    content: none;
}

.progressBar li.active {
    color: dodgerblue;
}

.progressBar li.active:before {
    border-color: dodgerblue;
    background-color: dodgerblue
}

.progressBar .active:after {
    background-color: dodgerblue;
}

<div class="row">
  <div class="col-xs-12 col-md-8 offset-md-2 section border">
    <div class="container-progressBar">
      <ul class="progressBar">
        <li class="active">Processing</li>
        <li class="active">Awaiting shipment</li>
        <li>Shipped</li>
      </ul>
    </div>
  </div>
</div>

Answer 3

Answer №2

As per your request, here is an answer that aligns more closely with what you were looking for:

.wrapper-progressBar {
    width: 100%
}

.progressBar {
}

.progressBar li {
    list-style-type: none;
    float: left;
    width: 33%;
    position: relative;
    text-align: center;
}

.progressBar li:before {
    content: " ";
    line-height: 30px;
    border-radius: 50%;
    width: 17px;
    height: 17px;
    border: 1px solid #ddd;
    border-left:none;
    display: block;
    text-align: center;
    margin: 8.5px auto 0px;
    background-color: #eee;
}
.progressBar li:after {
    content: "";
    position: absolute;
    width: 97%;
    height: 5px;
    background-color: #eee;
    border: 1px solid #ddd;
    border-right:none;
    top: 15px;
    left: -50%;
    z-index: -1;
}

.progressBar li:first-child:after {
    content: none;
}

.progressBar li.active {
    color: dodgerblue;
}

.progressBar li.active:before {
    border-color: dodgerblue;
    background-color: dodgerblue
}

.progressBar .active:after {
    background-color: dodgerblue;
}

<div class="row">
  <div class="col-xs-12 col-md-8 offset-md-2 block border">
    <div class="wrapper-progressBar">
      <ul class="progressBar">
        <li class="active">Processing Order</li>
        <li class="active">Waiting for Payment</li>
        <li>Payment Received</li>
      </ul>
    </div>
  </div>
</div>

Answer 4

As per your request, here is an answer that aligns more closely with what you were looking for:

.wrapper-progressBar {
    width: 100%
}

.progressBar {
}

.progressBar li {
    list-style-type: none;
    float: left;
    width: 33%;
    position: relative;
    text-align: center;
}

.progressBar li:before {
    content: " ";
    line-height: 30px;
    border-radius: 50%;
    width: 17px;
    height: 17px;
    border: 1px solid #ddd;
    border-left:none;
    display: block;
    text-align: center;
    margin: 8.5px auto 0px;
    background-color: #eee;
}
.progressBar li:after {
    content: "";
    position: absolute;
    width: 97%;
    height: 5px;
    background-color: #eee;
    border: 1px solid #ddd;
    border-right:none;
    top: 15px;
    left: -50%;
    z-index: -1;
}

.progressBar li:first-child:after {
    content: none;
}

.progressBar li.active {
    color: dodgerblue;
}

.progressBar li.active:before {
    border-color: dodgerblue;
    background-color: dodgerblue
}

.progressBar .active:after {
    background-color: dodgerblue;
}

<div class="row">
  <div class="col-xs-12 col-md-8 offset-md-2 block border">
    <div class="wrapper-progressBar">
      <ul class="progressBar">
        <li class="active">Processing Order</li>
        <li class="active">Waiting for Payment</li>
        <li>Payment Received</li>
      </ul>
    </div>
  </div>
</div>

Answer 5

Answer №3

Consider updating your CSS selector from

.progressBar li.active + li:after

to .progressBar li.active:after

.wrapper-progressBar {
    width: 100%
}

.progressBar {
}

.progressBar li {
    list-style-type: none;
    float: left;
    width: 33%;
    position: relative;
    text-align: center;
}

.progressBar li:before {
    content: " ";
    line-height: 30px;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    border: 1px solid #ddd;
    display: block;
    text-align: center;
    margin: 0 auto 10px;
    background-color: white
}

.progressBar li:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #ddd;
    top: 15px;
    left: -50%;
    z-index: -1;
}

.progressBar li:first-child:after {
    content: none;
}

.progressBar li.active {
    color: dodgerblue;
}

.progressBar li.active:before {
    border-color: dodgerblue;
    background-color: dodgerblue
}

.progressBar li.active:after {
    background-color: dodgerblue;
}

<div class="row">
  <div class="col-xs-12 col-md-8 offset-md-2 block border">
    <div class="wrapper-progressBar">
      <ul class="progressBar">
        <li class="active">Being Processed</li>
        <li class="active">Waiting for payment</li>
        <li>Paid</li>
      </ul>
    </div>
  </div>
</div>

Answer 6

Consider updating your CSS selector from

.progressBar li.active + li:after

to .progressBar li.active:after

.wrapper-progressBar {
    width: 100%
}

.progressBar {
}

.progressBar li {
    list-style-type: none;
    float: left;
    width: 33%;
    position: relative;
    text-align: center;
}

.progressBar li:before {
    content: " ";
    line-height: 30px;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    border: 1px solid #ddd;
    display: block;
    text-align: center;
    margin: 0 auto 10px;
    background-color: white
}

.progressBar li:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #ddd;
    top: 15px;
    left: -50%;
    z-index: -1;
}

.progressBar li:first-child:after {
    content: none;
}

.progressBar li.active {
    color: dodgerblue;
}

.progressBar li.active:before {
    border-color: dodgerblue;
    background-color: dodgerblue
}

.progressBar li.active:after {
    background-color: dodgerblue;
}

<div class="row">
  <div class="col-xs-12 col-md-8 offset-md-2 block border">
    <div class="wrapper-progressBar">
      <ul class="progressBar">
        <li class="active">Being Processed</li>
        <li class="active">Waiting for payment</li>
        <li>Paid</li>
      </ul>
    </div>
  </div>
</div>

Answer 7

Answer №4

.custom-progressBar {
    width: 100%
}

.progress-bar {
}

.progress-bar-item {
    list-style-type: none;
    float: left;
    width: 33%;
    position: relative;
    text-align: center;
}

.progress-bar-item:before {
    content: " ";
    line-height: 30px;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    border: 1px solid #ddd;
    display: block;
    text-align: center;
    margin: 0 auto 10px;
    background-color: white
}

.progress-bar-item:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #ddd;
    top: 15px;
    left: -50%;
    z-index: -1;
}

.progress-bar-item:first-child:after {
    content: none;
}

.progress-bar-item.active {
    color: dodgerblue;
}

.progress-bar-item.active:before {
    border-color: dodgerblue;
    background-color: dodgerblue;
    content:"\2713";
    color:white;
}

.progress-bar-item.active:after {
    background-color: dodgerblue;

}

<div class="row">
  <div class="col-xs-12 col-md-8 offset-md-2 block border">
    <div class="custom-progressBar">
      <ul class="progress-bar">
        <li class="active">1st Step Completed</li>
        <li class="active">Payment Pending</li>
        <li>Paid</li>
      </ul>
    </div>
  </div>
</div>

Answer 8

.custom-progressBar {
    width: 100%
}

.progress-bar {
}

.progress-bar-item {
    list-style-type: none;
    float: left;
    width: 33%;
    position: relative;
    text-align: center;
}

.progress-bar-item:before {
    content: " ";
    line-height: 30px;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    border: 1px solid #ddd;
    display: block;
    text-align: center;
    margin: 0 auto 10px;
    background-color: white
}

.progress-bar-item:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #ddd;
    top: 15px;
    left: -50%;
    z-index: -1;
}

.progress-bar-item:first-child:after {
    content: none;
}

.progress-bar-item.active {
    color: dodgerblue;
}

.progress-bar-item.active:before {
    border-color: dodgerblue;
    background-color: dodgerblue;
    content:"\2713";
    color:white;
}

.progress-bar-item.active:after {
    background-color: dodgerblue;

}

<div class="row">
  <div class="col-xs-12 col-md-8 offset-md-2 block border">
    <div class="custom-progressBar">
      <ul class="progress-bar">
        <li class="active">1st Step Completed</li>
        <li class="active">Payment Pending</li>
        <li>Paid</li>
      </ul>
    </div>
  </div>
</div>

HTML CSS Stepper: A Clean and Simple Design

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Finding an element by XPath through identifying text adjacent to the element

Enclose each set of objects, such as text, within a separate div, except for div elements

The parent div isn't properly extending to accommodate the table, and the columns aren't aligning correctly within the table when using CSS flexbox

A step-by-step guide to implementing Google Analytics Event tracking using PHP

What is the best way to centralize the storage of my website's header and footer?

display a div beside the anchor element using jQuery

Obtain the complete source code by using the responseText property of the XMLHttpRequest object

Adding elements in jQuery can be done by using the `

I am struggling to get the pop-up to close using the current code. I suspect that the issue might be related to the variable I was previously using in WordPress. I have made changes but the pop-up

Maximized - Immersive Full Screen Background - Limited to Half the Size?

How to Utilize JQuery for Sticky Elements

What is the best way to style the currently selected option element in a select dropdown?

What is the best way to incorporate a CSS transition without any dynamic property changes?

Words next to picture

What methods can be used to pause a jQuery function when hovering and resume it when the mouse leaves?

clicking the table to export it to Excel

Creating a thumbnail with a close button using an image

The CSS counter fails to increment

Toggle the tooltip to reveal a hidden div by clicking, and then click again to close it

Tips and Tricks for Utilizing ngTagsInput for Streamlining Data Filtering