css - matformfieldcontrol - ¿Cómo personalizo el componente input/md-input-container de Angular Material?

mat-form-field must contain a matformfieldcontrol

Question

Como se indica en el título, ¿cómo personalizo estos elementos? Parece que están usando un fondo transparente que es muy difícil de ver en la mayoría de las paletas de fondo

Answer 1

Agregue un archivo css en blanco después de "angular-material.css" y dentro de ese archivo css en blanco sobrescriba las reglas que desee personalizar.

Para el problema al que te enfrentas, agregué las siguientes reglas en mi custom.css.

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

Aquí puedes cambiar el color o el color background-color como quieras.

Answer 2

Para cambiar el color del marcador de posición, cambia el color del marcador de posición a Blanco:

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

Para personalizar el componente input / md-input-container de Angular Material, puede agregar este estilo a su hoja de estilo personal.

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

Answer 4

Yo recomendaría usar la configuración de la paleta:

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

});

Fuente: ¿Cómo configurar los colores claros de primer plano para el texto cuando se usa un tema oscuro?