CODEWITHSUNDEEP
javascriptangulartypescriptangular-modulemat-stepper
user18067747
user18067747

Reputation: 29

How to make CSS change in Angular Material Stepper?

I was working with Mat-Stepper on a project. This is the stackblitz link of the project. I wanted to make two changes here:-

  1. How can I remove the horizontal line between the steps and replace it with something else, like an arrow or something? I want to replace this line with something else
  2. I want to highlight the label by adding shadow around it. Is that possible? enter image description here

Thanks in advance,for the help.

Upvotes: 0

Views: 1042

Answers (1)

Taras
Taras

Reputation: 1145

Add this to your styles and change background to any you like

.mat-stepper-horizontal-line{border-color: transparent; position: relative;}
.mat-stepper-horizontal-line:after{content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; background: red; margin: -10px 0 0 -10px;}

Boxshadow

.mat-horizontal-stepper-header-container{box-shadow: inset 0 0 0 1px red;}

Upvotes: 1

Related Questions