如何在角度4中更改md-input-container的下划线颜色?

问题描述 投票:2回答:10

我一直在阅读这个文档(https://material.angular.io/components/input/overview)有一节说明如何更改md-input-container底部的行颜色。但我不清楚属性是什么,也没有代码示例可供参考。它表示可以使用md-input-container的color属性更改下划线颜色。另外我的下划线是动画下划线,在提供的链接中可见。有人可以更清楚地解释md-input-container的属性是什么,或提供一些代码。我已经尝试添加一个名为color的指令,在css中更改md-input-container的颜色等等,我没有成功。如果有人可以解释/显示一些证明这一点的代码,那将非常有帮助。谢谢!

这是一些代码,我觉得应该根据该文本的措辞。但事实并非如此。

  <md-input-container
    color="yellow"
    class="input-half-width">
    <input
      [(ngModel)]="driftInfo.title"
      name="title"
      mdInput
      placeholder="Ange rubrik"
    >
  </md-input-container>

enter image description here

angular material-design angular-material2
10个回答
6
投票

Change Colour Of Md-Input and Label When MAT-FOCUSED :

焦点颜色变化标签:

.mat-focused .mat-form-field-label {
    color: #027D7C !important;
}

输入焦点颜色变化:

.mat-form-field-ripple {
    background-color: #027D7C !important;
}

0
投票

颜色在材质主题中定义。您可以自定义您自己的主题,选择您的颜色:(@Component({ selector: '', templateUrl: '', styleUrls: [''], styles: [':host/deep/ .mat-form-field-underline {height: 0px!important}'] }) )。


2
投票

我这样解决了

/deep/ .mat-input-underline{
    border-bottom: 1px solid red!important;
}

2
投票

这就是我在Angular 6.0.1中删除我的方法

我知道它用于删除下划线,但您可以按照相同的步骤更改颜色e.t.c.谢谢

/deep/ .mat-form-field-underline {
    display: none;
}

2
投票

在你的组件中添加它qazxsw poi它在角度6中工作

例如:

encapsulation: ViewEncapsulation.None

并在CSS文件中添加代码

例如:

import {Component, Injectable, OnInit, ViewEncapsulation} from '@angular/core';

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

1
投票

问题是由于.mat-form-field-label { color: white !important; } .mat-form-field-underline { background-color: white !important;; } .mat-form-field-ripple { background-color: white !important; } View Encapsulation

在你的CSS中进行更改

git issues

检查这个@Component({ selector: 'input-overview-example', templateUrl: 'input-overview-example.html', styles: [':host/deep/ .mat-input-underline {background-color: red}'] }) 的工作示例。


1
投票

使用角度材质7.3这对我有用 - 在文本框具有焦点时更改下划线:

(在全球styles.scss中)

Plunker

0
投票

你可以用它

.mat-form-field.mat-focused .mat-form-field-ripple {
    background-color: #69f0ae !important;
  }

或者我做的是给angular材质元素一个类,并将它添加到styles.css或scss你正在使用的扩展名。所以它在样式中看起来像这样(这是一个全局样式表)

::ng-deep .mat-input-underline{
    border-bottom: 1px solid red;
}

0
投票

在你的CSS文件中添加

.mat-input-underline .<custom class name> {
    put your info you want to change here.
}

0
投票

对于angular 6+,我们可以在@Component部分的项目的typescript(.ts)文件中添加样式行。

.mat-form-field-underline {
    background-color: black !important; // change black with your color
}

整体代码设计应如下所示:

styles: [':host/deep/ .mat-form-field-underline {height: 0px!important}']

这适合我。

© www.soinside.com 2019 - 2024. All rights reserved.