Angular Material Stepper: Styling the Active Header

user_983783 0
Viewed 5467

I'm using Angular Material Stepper and would like to style the selected header to give it rounded borders with blue background. The css am using now is:

::ng-deep .mat-step-header  {
  background-color: #00A9CE;;
  border-radius: 32px;
  width: 100%;
  font-weight: 10px;
  color: #FFFFFF;
}

The css is ok but it applies to all the steps but i only want it to apply to the selected header. There is a class like .mat-step-icon-selected to target the selected icon but there is no equivalent to target the selected header.

I want the selected step to look like the following image (the (2) Fruits - it has rounded borders with blue background) and it is only on the selected step.

enter image description here

Am only interested in the class name that i can use to target the selected header. I tried .mat-step-header-selected but it doesn't work.

material-design angular-material css html
1 Answers

The mat-step-header has the role attribute with the value "tab"

<mat-step-header role="tab">

An element with the role tab also contain so known aria attributes which holds the state of the tab. There is also an aria-selected attribute which indicates wether the mat-step-header is selected or not.

<mat-step-header role="tab" aria-selected="true">

Now that we know that there is that aria attribute we can go and style selected step-headers:

::ng-deep .mat-step-header[aria-selected="true"]  {
  background-color: #00A9CE;;
  border-radius: 32px;
  width: 100%;
  font-weight: 10px;

  & div.mat-step-label.mat-step-label-active.mat-step-label-selected {
      color: #FFF;
  }
}

Additional ressources about aria and role="tab"

user_52731140
Related