mdInput，占位符的默认颜色

Question

是否可以在角度 JS 材质中更改mdInput占位符的默认颜色？

HTML代码位于

之下

<md-input-container class="header-inputContainer" floatPlaceholder="never">
    <input class="header-inputBar" mdInput placeholder="荷主" [formControl]="sample" [mdAutocomplete]="autoTxt">
</md-input-container>

现在它是格雷，你可以看到＆＃34; 荷主＆＃34;，但我想把它变成白色，就像＃34; Local Development＆＃34;。

我设法在mdInput聚焦时更改颜色，但不是默认颜色。

Answer 1

在大多数浏览器中，占位符文本为灰色。要更改此设置，请使用非标准::placeholder选择器为占位符设置样式。

.header-inputBar{height:40px;border-radius:5px;border:solid 1px gray;font-size:20px;}
.header-inputBar:focus{border-color:red;}
.header-inputBar::placeholder{color:#989898;}
.header-inputBar:focus::placeholder{color:red;}

<md-input-container class="header-inputContainer" floatPlaceholder="never">
    <input class="header-inputBar"  placeholder="荷主" />
</md-input-container>

Answer 2

仍然输入任何元素内部的输入。以下代码更改所有输入占位符文本颜色。

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #fff;
}
::-moz-placeholder { /* Firefox 19+ */
  color: #fff;
}
:-ms-input-placeholder { /* IE 10+ */
  color: #fff;
}
:-moz-placeholder { /* Firefox 18- */
  color: #fff;
}

您可以将其添加为特定元素，例如：

input.header-inputBar::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #fff;
}
input.header-inputBar::-moz-placeholder { /* Firefox 19+ */
  color: #fff;
}
input.header-inputBar:-ms-input-placeholder { /* IE 10+ */
  color: #fff;
}
input.header-inputBar:-moz-placeholder { /* Firefox 18- */
  color: #fff;
}

如果你的CSS被覆盖，你可以把它放在更高的优先级：

.header-inputContainer input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #fff !important;
}
input.header-inputBar::-moz-placeholder { /* Firefox 19+ */
  color: #fff !important;
}
.header-inputContainer input:-ms-input-placeholder { /* IE 10+ */
  color: #fff !important;
}
.header-inputContainer input:-moz-placeholder { /* Firefox 18- */
  color: #fff !important;
}