How to remove ripple effect from mat-stepper

Question

tihs is the effect when you hover you mose over matstepper not able to figure how to disable this effect want to remove ripple effect or focus effect or scrollable affect from mat-stepper please help me out here
i have tried all the methods not able to figure it out like ripple effect transparent and on-focus indicator

.stepper-qre {
        background: #F5F6F7;
        height: 88%;
    }
    
    .mat-horizontal-stepper-header-container {
        width: 65% !important;
        margin-left: 16.5%;
        /* display: -webkit-box !important; */
    }
    
    .mat-stepper-label-position-bottom .mat-horizontal-stepper-header {
        padding: 24px 0px !important;
    }
    
    ::ng-deep.mat-stepper-label-position-bottom.mat-stepper-horizontal-line {
        top: 34px !important;
    }
    
    .mat-stepper-label-position-bottom .mat-horizontal-stepper-header .mat-step-label {
        position: fixed;
        margin-top: 1%;
    }
    
    .stepper-qre.mat-step-icon-selected {
        background-color: #2699FB !important;
        color: white !important;
    }
    
    .stepper-qre.mat-step-icon-state-done {
        background-color: #2699FB !important;
        color: #fff !important;
    }
    
    .stepper-qre.mat-step-header .mat-step-icon {
        background-color: #C4C6CC !important;
        color: #fff;
    }
    
    ::ng-deep.mat-step-icon {
        height: 20px !important;
        width: 20px !important;
    }
    
    .mat-step-icon.mat-step-icon-state-notcompleted {
        background-color: #C4C6CC !important;
    }
    
    #activebutton:focus {
        border: none !important;
        outline: none !important;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    
    ::ng-deep.mat-step-header.mat-step-header-ripple {
        background-color: transparent !important;
    }
    
    .mat-ripple-element {
        transition-duration: 0ms !important;
    }

score 1 · Answer 1 · answered Dec 07 '20 at 07:55

1

There's a disableRipple property available for the stepper component, as per the API.

Modified the official stackblitz example to demonstrate.

answered Dec 07 '20 at 07:55

Aldin Bradaric

733
3
10

score 1 · Answer 2 · answered Dec 07 '20 at 09:20

1

.mat-step-header:hover{
    background-color: white !important;
}
.mat-step-header.cdk-program-focused {
      background-color: white;
  }
.mat-step-header.cdk-mouse-focused{
    background-color: white;
}
.mat-step-header.cdk-focused{
    background-color: white;
}

answered Dec 07 '20 at 09:20

Noob being Geek

21
3

this will help in changing background colour when hover or focused – Noob being Geek Dec 07 '20 at 09:21
This answer wold be much more helpful if you edited it to explain why it is correct and why it is the best answer for the question, so that others can learn from your knowledge. – Dragonthoughts Dec 07 '20 at 09:48

score 0 · Answer 3 · answered Jul 21 '23 at 12:16

0

Just set the disableRipple to true:

<mat-stepper [disableRipple]="true" #stepper></mat-stepper>

answered Jul 21 '23 at 12:16

Bullsized

362
4
7

How to remove ripple effect from mat-stepper

3 Answers3