Angular 4材质md输入样式CSS [英] Angular 4 material md-input style css

问题描述

我有一个来自角材料的输入分量:

I have a input component from angular material:

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

我有两个问题:

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

1. How do I change the underline to bold from dotted when in disabled state?
2. I know the APIs don't specifically say it but is there any way to to make the floatPlaceholder property work here. (The API only mentions the use of this property for md-select).

推荐答案

1.在禁用状态下，如何将下划线从虚线更改为粗体?

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

Use ViewEncapsulation to override default styles with your custom styles. In your component.css, add the following styles:

.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:

.. and in your component.ts file, set encapsulation to 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>

这里是完成工作演示的链接

这篇关于Angular 4材质md输入样式CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！