如何自定义Angular Material的input / md-input-container组件？

Question

As stated in the title, how do I customize these elements? It seems they are using transparent background which is very difficult to view on most background palettes

Answer 1

Add one blank css file after "angular-material.css" and inside that blank css file overwrite the rules you want to customize.

For the problem you are facing I added the following rules in my custom.css.

md-input-container.md-default-theme label, 
 md-input-container.md-default-theme .md-placeholder{
    color:grey !important;
}

Here you could change color or background-color as you like.

Answer 2

I would recommend to use the palette configuration:

    app.config(function($mdThemingProvider) {

        //change default color for primary
        var indigo = $mdThemingProvider.extendPalette('indigo', {
            '500': '569fd4'
        });
        $mdThemingProvider.definePalette('indigo', indigo);

        //change default color for warn
        var indigo = $mdThemingProvider.extendPalette('red', {
            '500': 'ff5800'
        });
        $mdThemingProvider.definePalette('red', indigo);

        $mdThemingProvider.theme('default').primaryPalette('indigo').warnPalette('red');  

        //here you change placeholder/foreground color.
        $mdThemingProvider.theme('default').foregroundPalette[3] = "rgba(0,0,0,0.67)";

});

Source: How to set light foreground colors for text when using dark theme?

Answer 3

To change placeholder color do this, it changes the placeholder color to White:

/* do not group these rules */
.your-pre-defined-container > md-input-container > input::-webkit-input-placeholder {
    color: #FFF;
}
.your-pre-defined-class > md-input-container > input:-moz-placeholder {
    /* FF 4-18 */
    color: #FFF;
}
.your-pre-defined-class > md-input-container > input::-moz-placeholder {
    /* FF 19+ */
    color: #FFF;
}
.your-pre-defined-class > md-input-container > input:-ms-input-placeholder {
    /* IE 10+ */
    color: #FFF;
}

Answer 4

To customize Angular Material's input/md-input-container component, you can add this style to your personal style sheet.

 md-input-container { display: inline-block; position: relative; padding-top: 2px; padding-bottom: 2px; padding-left: 2px; padding-right: 2px; margin: 1px 0; vertical-align: middle; /* * The .md-input class is added to the input/textarea */ } md-input-container .md-input { -webkit-order: 2; -ms-flex-order: 2; order: 2; display: block; margin-top: 0; background: none; padding-top: 2px; padding-bottom: 2px; padding-left: 2px; padding-right: 2px; border-width: 1px 1px 1px 1px ; line-height: 26px; height: 30px; -ms-flex-preferred-size: 26px; border-radius: 5px; border-style: solid; width: 100%; box-sizing: border-box; float: left; } md-input-container.md-input-focused .md-input, md-input-container .md-input.ng-invalid.ng-dirty { padding-bottom: 0; border-width: 0 0 2px 0; } md-input-container:not(.md-input-invalid).md-input-focused .md-input { border-color: black; } md-input-container:not(.md-input-invalid).md-input-focused label { padding-top: 0px; color: green; } md-input-container .md-errors-spacer { float: right; min-height: 0px; min-width: 0px; } html[dir=rtl] md-input-container .md-errors-spacer { float: left; unicode-bidi: embed; } body[dir=rtl] md-input-container .md-errors-spacer { float: left; unicode-bidi: embed; } md-input-container .md-errors-spacer bdo[dir=rtl] { direction: rtl; unicode-bidi: bidi-override; } md-input-container .md-errors-spacer bdo[dir=ltr] { direction: ltr; unicode-bidi: bidi-override; } md-icon { margin: auto; background-repeat: no-repeat no-repeat; display: inline-block; vertical-align: middle; fill: currentColor; height: 24px; width: 24px;} md-icon svg { pointer-events: none; display: block; } md-icon[md-font-icon] { line-height: 1; width: auto; } md-input-container > md-icon { position: absolute; top: 5px; left: 20px; right: auto; } md-input-container ng-messages, md-input-container data-ng-messages, md-input-container x-ng-messages, md-input-container [ng-messages], md-input-container [data-ng-messages], md-input-container [x-ng-messages] { position: relative; float: right; -webkit-order: 4; -ms-flex-order: 4; order: 4; overflow: hidden; clear: left; } md-input-container ng-message, md-input-container data-ng-message, md-input-container x-ng-message, md-input-container [ng-message], md-input-container [data-ng-message], md-input-container [x-ng-message], md-input-container [ng-message-exp], md-input-container [data-ng-message-exp], md-input-container [x-ng-message-exp], md-input-container .md-char-counter { font-size: 12px; line-height: 14px; overflow: hidden; transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2); opacity: 1; margin-top: 0; padding-top: 1px; } md-input-container ng-message:not(.md-char-counter), md-input-container data-ng-message:not(.md-char-counter), md-input-container x-ng-message:not(.md-char-counter), md-input-container [ng-message]:not(.md-char-counter), md-input-container [data-ng-message]:not(.md-char-counter), md-input-container [x-ng-message]:not(.md-char-counter), md-input-container [ng-message-exp]:not(.md-char-counter), md-input-container [data-ng-message-exp]:not(.md-char-counter), md-input-container [x-ng-message-exp]:not(.md-char-counter), md-input-container .md-char-counter:not(.md-char-counter) { padding-right: 10px; padding-left: 50px; } md-input-container.md-input-focused label:not(.md-no-float), md-input-container.md-input-has-placeholder label:not(.md-no-float), md-input-container.md-input-has-value label:not(.md-no-float) { -webkit-transform: translate3d(0, 20px, 0) scale(0.75); transform: translate3d(0, 20px, 0) scale(0.75); } md-input-container.md-default-theme.md-input-invalid ng-message, md-input-container.md-input-invalid ng-message, md-input-container.md-default-theme.md-input-invalid data-ng-message, md-input-container.md-input-invalid data-ng-message, md-input-container.md-default-theme.md-input-invalid x-ng-message, md-input-container.md-input-invalid x-ng-message, md-input-container.md-default-theme.md-input-invalid [ng-message], md-input-container.md-input-invalid [ng-message], md-input-container.md-default-theme.md-input-invalid [data-ng-message], md-input-container.md-input-invalid [data-ng-message], md-input-container.md-default-theme.md-input-invalid [x-ng-message], md-input-container.md-input-invalid [x-ng-message], md-input-container.md-default-theme.md-input-invalid [ng-message-exp], md-input-container.md-input-invalid [ng-message-exp], md-input-container.md-default-theme.md-input-invalid [data-ng-message-exp], md-input-container.md-input-invalid [data-ng-message-exp], md-input-container.md-default-theme.md-input-invalid [x-ng-message-exp], md-input-container.md-input-invalid [x-ng-message-exp], md-input-container.md-default-theme.md-input-invalid .md-char-counter, md-input-container.md-input-invalid .md-char-counter { color: rgb(255,44,0); }