Как да персонализирам компонента input/md-input-container на Angular Material?

Както е посочено в заглавието, как да персонализирам тези елементи? Изглежда, че използват прозрачен фон, който е много труден за гледане на повечето фонови палитри


css angular-material pseudo-class
person dragonmnl    schedule 07.03.2015    source източник

Отговори (4)


arrow_upward
11
arrow_downward

Добавете един празен css файл след "angular-material.css" и вътре в този празен css файл презапишете правилата, които искате да персонализирате.

За проблема, с който се сблъсквате, добавих следните правила в моя custom.css.

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

Тук можете да промените color или background-color както искате.

person nitin    schedule 14.03.2015
comment
Някаква идея как да променим цвета на текста, когато въвеждаме въвеждането и реда, който е под текста, когато фокусираме въвеждането? - person Ellone; 15.09.2015
comment
има ли някакъв начин да го променя за всички дефинирани теми, вместо да споменавам клас тук md-input-container.md-default-theme - person nicky; 21.09.2015
comment
@Ellone опитайте това input.md-input:focus{ border-color: blue; } - person Hans Petter Naumann; 17.11.2015
comment
това работи, но коригирането на действителната тема, която използвате, както е предложено от Jean F., е много по-добро и поддържано решение - person chrismarx; 21.04.2016

arrow_upward
7
arrow_downward

Бих препоръчал да използвате конфигурацията на палитрата:

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

});

Източник: Как да зададете светли цветове на преден план за текст при използване на тъмна тема?

person Jean F.    schedule 12.11.2015
comment
хм, просто настройката на преден план не ми свърши работа, за да накарам текста да се промени във входовете, темата трябваше да използва тъмната настройка - person chrismarx; 21.04.2016

arrow_upward
0
arrow_downward

За да промените цвета на контейнера, направете това, той променя цвета на контейнера на бяло:

/* 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;
}
person felipekm    schedule 15.11.2016

arrow_upward
0
arrow_downward

За да персонализирате компонента input/md-input-container на Angular Material, можете да добавите този стил към вашия личен лист със стилове.

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

person Arjun G Perambra    schedule 22.12.2016