Angular 4 material md-input 样式 css

Question

我有一个来自 Angular Material 的输入组件:

<input mdInput placeholder="Name" disabled floatPlaceholder="never">

我有两个问题:

1. 如何在禁用状态下将下划线从虚线更改为粗体？
2. 我知道 API 没有具体说明，但有什么方法可以使 floatPlaceholder 属性在这里工作。 (API 仅提及将此属性用于 md-select)。

Answer 1

<强>1。如何在禁用状态下将下划线从虚线更改为粗体？

使用ViewEncapsulation用您的自定义样式覆盖默认样式。在你的component.css ，添加以下样式:

.mat-form-field-underline.mat-disabled {
  background-image:linear-gradient(to right,rgba(0,0,0,.42) 0,rgba(0,0,0,.42) 100%,transparent 0);
  /* Set 4px for a solid line */
  background-size : 4px 4px; 
}

.. 在你的 component.ts 中文件，设置 encapsulation至 ViewEncapsulation.None :

import { ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  encapsulation: ViewEncapsulation.None
})

---

<强>2。我知道 API 没有具体说明，但有什么方法可以使 floatPlaceholder 属性在这里工作。 (API 仅提及将此属性用于 md-select)。

添加 floatPlaceholder <md-form-field> 上的属性而不是 <input> :

<md-form-field floatPlaceholder="never">
    <input mdInput placeholder="Name" disabled >
</md-form-field>

这是一个完整的链接 working demo .