Topic: Angular how to change step color in stepper

abhinov free asked 3 years ago

Expected behavior Looking for a method to change the step colour in the angular stepper component, cannot see how to do this.

Actual behavior Please provide a code sample to clearly explain how to change the step colour for a angular stepper

Resources (screenshots, code snippets etc.)

Moliere Peronneau free commented 3 years ago

moliere perone est un

Arkadiusz Idzikowski staff answered 3 years ago

You can change the step color by overriding its CSS styles. Here is an example for inactive and active step (you need to add those styles to your global styles.scss file):

// Horizontal inactive
mdb-stepper .card-body ul.stepper.horizontal .step .step-title:before {
  background-color: black;

// Horizontal active
mdb-stepper .card-body ul.stepper.horizontal .step-title:before {
  background-color: green;

// Vertical inactive
mdb-stepper .card-body ul.stepper .step:before {
  background-color: black;

// Vertical active
mdb-stepper .card-body ul.stepper {
  background-color: green;

abhinov free commented 3 years ago

Thanks, the vertical does not seem to work?

// active
mdb-stepper .card-body ul.stepper.vertical .step-title:before {
    background-color: green;

Arkadiusz Idzikowski staff commented 3 years ago

I edited my answer and added an example for vertical steppers.

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 9.4.0
  • Device: Mac
  • Browser: Firefox
  • OS: Mac OS
  • Provided sample code: No
  • Provided link: No