为md-input更改Angular Material中的默认css

Question

我使用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;      
}

问题

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

Answer 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

观察他们的演示，并检查有针对性的输入。

Answer 2

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

From the docs...

  

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