Question

如何在Angular Material中使用css更改md-input-container占位符颜色？如下面的截图我有电话号码。和密码文本字段。电话号码。 textfield有电话号码，密码有密码占位符名称。

Answer 1

在最后一个版本的角度中，您可以删除输入中的占位符，并在 mat-form-field 中添加 mat-placeholder ，并使用a自定义css班级

html：

<mat-form-field>
    <input matInput type="text">
    <mat-placeholder class="placeholder">Search</mat-placeholder>
</mat-form-field>

css：

.mat-focused .placeholder {
    color: #00D318;
}

Answer 2

占位符在Angular Material中被描述为# Helper function for wating until a condition is true. function await([scriptblock] $sb) { while (-not (& $sb)) { Start-Sleep -Milliseconds 200 } } $ie = new-object -com "InternetExplorer.Application" $ie.navigate("http://www.gastontax.com/") # Wait until the page has finished loading. await { $ie.ReadyState -eq 4 } # Click the "Yes, I accept" button. $ie.document.getElementById("ctl00_Tax_btnAccept").click() # !! HACK (part 1 of 2): # !! Delaying making IE visible until here seems to be the only way # !! to get the new DOM to be at least *partially* reflected in $ie.document. $ie.visible = $true # Wait until the page has finished loading. await { $ie.ReadyState -eq 4 } # !! HACK (part 2 of 2): # !! Inexplicably, another toggling of visibility is what it takes for *all* # !! elements in the new DOM to be accessible via $ie.Document. $ie.visible = $false $ie.visible = $true #Create the drop-down search parameters $taxyear = "All" $status = "Unpaid" $searchtype = "Both" $searchparam = "Parcel Number" $searchtext = "XXXXXX" #Set the drop-down search parameters $doc = $ie.document $doc.getElementById("ctl00_Tax_drpTaxYear").value = $taxyear $ie.document.getElementById("ctl00_Tax_drpStatus").value = $status $ie.document.getElementById("ctl00_Tax_drpSearchType").value = $searchtype $ie.document.getElementById("ctl00_Tax_drpSearchParam").value = $searchparam #Create the parcel name parameter $ie.document.getElementById("ctl00_Tax_txtSearchParam").value = $searchtext $ie.document.getElementById("ctl00_Tax_btnSearch").click()。所以你实际上需要设置标签的样式而不是占位符。

只要您点击（焦点）输入此<label>，就会看到占位符向上滑动并转换为<label>形式。

所以你只需要应用这个CSS：

<label>

看一下 Plunkr Demo 。

Answer 3

在Angular 4 +

中

首先，您需要关闭ViewEncapsulation以设置Material Elements样式。请注意，这是颠覆Angular模拟阴影DOM默认值，您应该谨慎行事（https://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html）。

在dummy.component.ts中：

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

然后给你＆lt; mat-form-field＆gt;元素dummy.component.html中的唯一类：

<mat-form-field class="dummy-input-field" floatPlaceholder="always">
  <input placeholder="Dummy"/>
</mat-form-field>

最后在dummy.component.css中应用样式：

.dummy-input-field .mat-input-placeholder {
  color: red;
}

同样，如果要聚焦字段，则需要动态更改颜色：

.dummy-input-field.mat-focused .mat-input-placeholder {
  color: red;
}

Answer 4

如@Wenacary在这篇博文中所述：How to change Angular 5 Material input placeholder?

在最新版本的angular中，您可以在   在mat-form-field中输入并添加mat-placeholder并自定义   具有类的CSS

html：
<mat-form-field>
    <input matInput type="text">
    <mat-placeholder class="placeholder">Search</mat-placeholder>
</mat-form-field>
css：
.mat-focused .placeholder {
    color: #00D318;
}

Answer 5

对于具有 mat 前缀而非 md 前缀的较新版本的素材，您可以通过两种方式执行此操作：

方式1：使用 view encapsulation 设置为none，然后在组件css文件中编写样式，如上面的答案中指出的@ user2245995。虽然这是角度建议的方式，但请注意，您在此处编写的样式将传播到所有子/父组件并影响其他元素。

方式2：我们可以使用阴影穿透后代组合，即 / deep / 或 :: ng-deep 或＆gt ;＆gt;＆gt; 以下是一个示例

/deep/ label.mat-input-placeholder {
  color: #fff;   // choose the color you want
}

尽管此方法已在角度文档中指定，但他们已经提到很快就会弃用此方法。阅读更多：https://angular.io/guide/component-styles#!#-deep-

Answer 6

.container {
  .mat-form-field-outline,
  .mat-form-field-empty.mat-form-field-label,
  .mat-form-field-label,
  .mat-form-field-underline,
  .mat-input-element,
  ::placeholder {
    color: $white !important;
  }
}

上面的代码给了我下面的结果。我要覆盖form-field 轮廓，空标签，标签，下划线，输入元素，占位符文本。

我正在使用Angular 8.2.2和Angular Material 8.2.2

Answer 7

我试图尽可能确定垫子输入的颜色，我敢在这里分享结果，希望它能帮助其他人（处理占位符颜色自定义需求，如问题中所问）：< /p>

使用的 CSS 自定义属性

注意：当焦点在这里与否时，颜色被认为是不同的，这就是为什么我们在下面有两个块：

    --clear-button-color: lightblue;
    --asterisk-color: lightgreen;
    --label-color: springgreen;
    --underline-color: blue;
    --input-color: lightgray;

    --clear-button-focused-color: blue;
    --asterisk-focused-color: green;
    --label-focused-color: pink;
    --underline-focused-color: yellow;
    --input-focused-color: gray;
    --placeholder-focused-color: magenta;
    --caret-focused-color: blue;

SCSS 样式

    .mat-form-field {
        &.mat-focused {
            > .mat-form-field-wrapper {
                > .mat-form-field-flex {
                    > .mat-form-field-infix {
                        > .mat-input-element {
                            color: var(--input-focused-color);
                            caret-color: var(--caret-focused-color);

                            &::placeholder {
                                color: var(--placeholder-focused-color);
                            }
                        }
                        > .mat-form-field-label-wrapper {
                            > .mat-form-field-label {
                                > mat-label {
                                    color: var(--label-focused-color);
                                }

                                > .mat-placeholder-required {
                                    color: var(--asterisk-focused-color);
                                }
                            }
                        }
                    }
                    > .mat-form-field-suffix {
                        > .mat-focus-indicator {
                            > .mat-button-wrapper {
                                > .mat-icon {
                                    color: var(--clear-button-focused-color);
                                }
                            }
                        }
                    }
                }
                > .mat-form-field-underline {
                    > .mat-form-field-ripple {
                        background-color: var(--underline-focused-color);
                    }

                    background-color: var(--underline-focused-color);
                }
            }
        }

        > .mat-form-field-wrapper {
            > .mat-form-field-flex {
                > .mat-form-field-infix {
                    > .mat-input-element {
                        color: var(--input-color);

                        &::placeholder {
                            color: var(--placeholder-color);
                        }
                    }
                    > .mat-form-field-label-wrapper {
                        > .mat-form-field-label {
                            > mat-label {
                                color: var(--label-color);
                            }

                            > .mat-placeholder-required {
                                color: var(--asterisk-color);
                            }
                        }
                    }
                }
                > .mat-form-field-suffix {
                    > .mat-focus-indicator {
                        > .mat-button-wrapper {
                            > .mat-icon {
                                color: var(--clear-button-color);
                            }
                        }
                    }
                }
            }
            > .mat-form-field-underline {
                > .mat-form-field-ripple {
                    background-color: var(--underline-color);
                }

                background-color: var(--underline-color);
            }
        }
    }

如何使用角度材质中的css更改md-input-container占位符颜色

7 个答案:

使用的 CSS 自定义属性

SCSS 样式