在角度/材料中对垫形字段输入进行样式设置 [英] Styling mat-form-field input in Angular/Material

问题描述

我有一个要在其中添加自定义样式的输入的mat-form-field，但是我在Angular Material官方网站上找不到与此相关的任何文档.

I have a mat-form-field with input that I am wanting to add a custom style to, however I cannot find any documentation regarding this on the official Angular Material website.

我最终的目标是:

• 在选择输入框后更改下划线颜色
• 删除浮动标签(如果可能的话-我知道这是一项功能，但现在已弃用).

我还不是最熟练使用Angular的人，但是如果需要在JS中进行更改，那么我总是可以尽全力做到这一点.

I'm not the most adept with Angular just yet, but if things need changing in JS, then I can always give it my best shot.

我只需要一点指导.

当前代码:

<form class="search-form">
  <mat-form-field class="example-full-width">
    <input class="toolbar-search" type="text" matInput>
    <mat-placeholder>Search</mat-placeholder>
    <mat-icon matSuffix style="font-size: 1.2em">search</mat-icon>
  </mat-form-field>
</form>

当前CSS:

// Change text colour when inputting text
.toolbar-search, mat-placeholder {
  color: white;
}

// Changes the underline and placeholder colour before input is selected
/deep/ .mat-input-underline {
    background-color: white;
}

推荐答案

据我了解，这两个功能似乎都在MatFormField中.

From my understanding, both features seem to be in MatFormField.

不推荐使用
1. floatPlaceholder，因为现在它是使用输入
来应用的FloatLabelType('never', 'always', 'auto')的[floatLabel]
2. 您可以使用输入[color]更改下划线的颜色，但是只能从主题('primary', 'accent', 'warn')中选择颜色.有关如何设置主题的更多信息，请访问其网站在此处，

1. floatPlaceholder is deprecated, because now it's [floatLabel] for FloatLabelType ('never', 'always', 'auto'), applied using input
2. You can change the color of the underline with input [color], however you can only select colors from your theme ('primary', 'accent', 'warn'). For more on how to setup the theme go to their website here,

<form class="search-form">
  <mat-form-field class="example-full-width"
                  floatLabel="never" color="primary">
    <input class="toolbar-search" type="text" matInput placeholder="search">
    <mat-icon matSuffix style="font-size: 1.2em">search</mat-icon>
  </mat-form-field>
</form>

这篇关于在角度/材料中对垫形字段输入进行样式设置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！