Question

我想将我的mdInput控件设置为在其周围有一个黑框：

    <md-form-field>
      <input type="text" mdInput [(ngModel)]="row.price" placeholder="Price">
    </md-form-field>

我尝试在输入控件周围放置一个div，其中style =“border：1px solid black;”但是它只在输入控件本身周围创建边框。我尝试将边框添加到md-form-field但是它只在左侧和右侧放置边框（但是如果我能够在顶部和底部获得边框，它看起来像我能够实现的任何方式来判断高度）实现那个？

Answer 1

https://material.angular.io/components/form-field/overview#form-field-appearance-variants

较新版本的角度表单字段支持表单字段的不同外观，例如

旧版（重大默认设置）
标准
填充
大纲

概述是您要寻找的

在此处查看演示

https://stackblitz.com/edit/angular-61fqsd?file=src/app/app.component.html

Answer 2

覆盖默认Material2样式的推荐方法是使用ViewEncapsulation。 deep ， ::ng-deep 和 >>> 会被弃用，以后可能会被弃用（{{3} }）。

阴影穿透后代组合子已被弃用且支持从主要浏览器和工具中删除。因此我们打算放弃支持Angular（对于 / deep / ，＆gt;＆gt;＆gt; 和 :: ng-deep 的所有3个）。

要为输入设置边框，请在component.ts中包含以下内容：

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

@Component({
    ....
    encapsulation: ViewEncapsulation.None
})

...然后只需在组件样式中添加以下内容：

/* To display a border for the input */
.mat-input-flex.mat-form-field-flex{
   border: 1px solid black;
}

/* To remove the default underline */
.mat-input-underline.mat-form-field-underline {
   background: transparent;
}

/* To remove the underline ripple */
.mat-input-ripple.mat-form-field-ripple{
   background-color: transparent; 
}

这是official documentation。

Answer 3

这对我有用

.mat-form-field-underline .mat-form-field-ripple {
  background: orange !important;
}

Answer 4

试试这个：

::ng-deep .mat-input-wrapper{
 background-color:black; 
}

或（取决于您的需要）

::ng-deep .mat-input-wrapper{
   border: 2px solid black;
}

DEMO

封装：ViewEncapsulation.None有它的缺点，它会影响所有类，你希望与否。它仍然没有被弃用，我认为它将被其他东西取代。

Answer 5

尝试一下：：

.mat-form-field-appearance-fill .mat-form-field-underline::before {
height: 0px !important;

}

Angular Material mdInput控件周围的边框

5 个答案: