在 Angular Material 中为 md-input 更改默认 css答案

【问题标题】：Changing default css in Angular Material for md-input在 Angular Material 中为 md-input 更改默认 css
【发布时间】：2016-02-02 23:53:02
【问题描述】：

我已经使用 angualr-material 实现了表单，我找不到任何标准方法来更改材料中的默认颜色编码。

表格

    <div class="col-xs-12 testFormLabel">
                <md-input-container class="testLabel">
                    <label>Reason</label>
                        <input name="reasonBox" id="reasonBox" ng-model="obj. reasonBox" ng-required="true">  
                </md-input-container>
    </div>

css

.md-input-has-value. testLabel > input {
    color:#008cba;      
}

问题

如何将自动对焦标签名称和下划线更改为不同的颜色（比如说从深蓝色到绿色）

【问题讨论】：

标签： angularjs material-design angular-material

【解决方案1】：

你可以使用这个选择器来改变输入：

md-input-container:not(.md-input-invalid).md-input-focused .md-input {
    border-color: red
}

用它来改变标签：

md-input-container:not(.md-input-invalid).md-input-focused label {
    color: red
}

在包含角度材料的 css 后包含它。

我是通过访问此处的文档页面获得的：https://material.angularjs.org/latest/demo/input

查看他们的演示，并检查重点输入。

【讨论】：

谢谢，但我无法将标签颜色从蓝色更改。
为什么不呢？检查页面，看看为什么这个规则不被接受。
它是，但边框颜色适用于下划线而不适用于标签。
使用标签着色技术编辑答案。

【解决方案2】：

您也可以使用<md-input-container [dividerColor]="primary|accent|warn"> 设置字段处于焦点时的颜色。

From the docs...

分隔线（输入内容下的线）颜色可以通过使用 md-input-container 的 dividerColor 属性来改变。 primary 的值是默认值，将对应于主题原色。或者，可以指定重音或警告以使用主题的重音或警告颜色。

【讨论】：

只是为了澄清，这个答案是关于 Angular2+，但 OP 询问了 AngularJS（版本 1）。