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

Question

我已经使用 angualr-material 实现了表单，我在 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
}

在为 angular material 添加 css 之后添加此内容。

我通过这里的文档页面得到了这个：https://material.angularjs.org/latest/demo/input

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

Answer 2

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

From the docs...

The divider (line under the input content) color can be changed by using the dividerColor attribute of md-input-container. A value of primary is the default and will correspond to the theme primary color. Alternatively, accent or warn can be specified to use the theme's accent or warn color.

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

Changing default css in Angular Material for md-input

angularjs

material-design

angular-material