Jak dostosować komponent wejściowy/wejściowy kontenera wejściowego składnika kątowego?

Question

Jak podano w tytule, w jaki sposób mogę dostosować te elementy? Wygląda na to, że używają przezroczystego tła, które jest bardzo trudne do zobaczenia na większości palet tła.

Answer 1

Dodaj jeden pusty plik css po "kanalik-materiał.css", a wewnątrz tego pustego pliku css nadpisujesz reguły, które chcesz dostosować.

Dla napotkanego problemu dodałem następujące zasady do pliku custom.css.

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

Tutaj można zmienić color lub background-color jak chcesz.

Answer 2

polecam użyć konfiguracji palety:

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

}); 

Źródło: How to set light foreground colors for text when using dark theme?

Answer 3

Aby zmienić kolor zastępczy to zrobić, zmienia kolor zastępczy na białym:

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

Aby Dostosuj komponent input/md-input-container dla Angular Material, możesz dodać ten styl do swojego osobistego arkusza stylów.

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