Angular Material Button Disable Style Change

Question

form.html

<md-button class="md-raised md-primary pull-right formPage" ng-disabled="formPage.$invalid" ng-click ="submit()">SAVE</md-button>

css

.md-button.md-raised.md-primary.formPage {
    position: right !important;
    color: #FFFFFF;
    background-color:#008cba;    
}

Button is disabled but it has custom color from my css. How can i show the default disable style or maybe change button color if it is disable ?

Jsfiddle

sdfacre · Accepted Answer · 2016-03-26 04:35:15Z

9

the css should be

.md-button.md-raised.md-primary.formPage:not([disabled])

see http://jsfiddle.net/apxbutmf/

answered Mar 26, 2016 at 4:35

sdfacre

1,2737 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mad-D Over a year ago

I thought about this logic, but couldn't find out how can i add color when it is not disabled. Thanks a lot for your help.

Mikolaj · Accepted Answer · 2022-02-13 08:35:50Z

0

When the button is disabled a new class comes up to your button with name called like disabled. Check it and update your css as below.

.md-button.md-raised.md-primary.formPage:not(.disabledclassname) {
    position: right !important;
    color: #FFFFFF;
    background-color:#008cba;    
}

edited Feb 13, 2022 at 8:35

Mikolaj

1,9692 gold badges26 silver badges42 bronze badges

answered Mar 25, 2016 at 21:26

Dennis Parsons

1

1 Comment

Mad-D Over a year ago

That didn't work. I have updated the question with Fiddle.

Y.kh · Accepted Answer · 2022-03-14 19:22:49Z

0

Overriding following css class worked for me (Angular-Material v12 Button mat-stroked):

.mat-stroked-button.mat-button-disabled.mat-button-disabled {    

color: #FFFFFF;
background-color: #008cba

}

answered Mar 14, 2022 at 19:22

Y.kh

2033 silver badges7 bronze badges

Collectives™ on Stack Overflow

Angular Material Button Disable Style Change

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related