Làm cách nào để tùy chỉnh thành phần đầu vào/md-input-container của Angular Material?

Question

Như đã nêu trong tiêu đề, làm cách nào để tùy chỉnh các yếu tố này? Có vẻ như họ đang sử dụng nền trong suốt rất khó xem trên hầu hết các bảng màu nền

Answer 1

Thêm một tệp css trống sau "angular-material.css" và bên trong tệp css trống đó ghi đè các quy tắc bạn muốn tùy chỉnh.

Đối với sự cố bạn đang gặp phải, tôi đã thêm các quy tắc sau vào custom.css của mình.

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

Tại đây bạn có thể thay đổi color hoặc background-color tùy thích.

Answer 2

tôi sẽ khuyên bạn nên sử dụng cấu hình bảng:

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)"; 

}); 

Nguồn: How to set light foreground colors for text when using dark theme?

Answer 3

Để thay đổi placeholder màu làm điều này, nó thay đổi màu sắc giữ chỗ để trắng:

/* 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

Để tùy chỉnh thành phần đầu vào/md-input-container của Angular Material, bạn có thể thêm kiểu này vào bảng định kiểu cá nhân của bạn.

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); 
 
      }