Цвет по умолчанию для mdInput, заполнитель

Question

Можно ли изменить цвет по умолчанию для местозаполнителя mdInput в угловом материалеJS?

HTML-код ниже

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

теперь это серый, как видите 荷主 ", но я хочу покрасить его в белый цвет" Local Development ".

Мне удалось изменить цвет, когда фокус 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;
}