Angular 4 material md-输入样式 css

Question

我有一个来自 angular material 的输入组件：

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

我有两个问题：

如何在禁用状态下将下划线从虚线改为粗体？
我知道 API 没有具体说明，但是有什么方法可以使 floatPlaceholder 属性在这里工作。（API只提到属性用于md-select）。

Answer 1

您可以像这样将下划线从虚线更改为粗体：

.mat-input-underline.mat-form-field-underline.mat-disabled {
background-image: linear-gradient(90deg,rgba(0, 0, 0, 0.66) 0,rgba(0, 0, 0, 0.66) 0,rgb(0, 0, 0));
height: 2px;
background-size:  4px 2px;
}

Answer 2

1) 要在禁用时将下划线从虚线更改为正常，请应用以下 css：

.mat-form-field-underline.mat-disabled {
  background-color: rgba(0,0,0,.42) !important; // this is the default color
  background-image: none !important; // the dotted line is an image, this will remove it
}

2) 要启用 floatPlaceholder，您需要将其应用于容器，而不是输入：

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

Answer 3

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）。

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

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

这里有一个link来完成working demo.

Angular 4 material md-输入样式 css

Angular 4 material md-input style css

angular-material

angular-material2

angular