Question

Angular material 2 color for input

<md-input-container >
  <input type="password" md-input placeholder="password">

</md-input-container>

我希望在点击时更改颜色，我该怎么做？

Answer 1

请记住，您不想对材质颜色发疯，他们会限制并将其分配给各种UI元素和状态。

据说......

如果您询问在项目具有焦点时如何更改颜色，则可以使用颜色=＆＃34;＆＃34;属性并将其设置为＆＃39; primary＆＃39; ＆＃39;默认＆＃39;，＆＃39;重音＆＃39;，或＆＃39;警告＆＃39;虽然这会违反某些重要原则，因为当您这样做时，您可能会向用户发出错误的状态信号。

<md-input-container color='accent'>
  <input type="password" md-input placeholder="password">
</md-input-container>

这是一个谷歌公司名称设置为＆＃39; accent＆＃39;

的掠夺者

如果您不喜欢默认颜色，那么我建议您创建自己的主题

如果你真的想发疯，你可以覆盖输入类的SASS输入mixin

https://github.com/angular/material2/blob/0666207527299758293a9587a5b79212167a9a70/src/lib/input/_input-theme.scss

我不建议，但如果你想坚持材料设计指南

如果您希望将状态设置为不同的问题

Answer 2

https://material.angular.io/guide/theming

style.css

.mat-dark {
      @include angular-material-theme($dark-app-theme);
      input {
        color: white;
      }
    }

<div class="mat-dark">
    <md-input-container>
       <input type="password" md-input placeholder="password">
    </md-input-container>
</div>

Answer 3

.mat-focused .mat-form-field-label {
    color: #5cb53f !important;
}

.mat-form-field-ripple {
    background-color: #5cb53f !important;
}

角度材料2颜色输入

3 个答案: