带有 ng-classes 的样式输入占位符颜色样式答案

【问题标题】：Style input placeholder color style with ng-classes带有 ng-classes 的样式输入占位符颜色样式
【发布时间】：2015-09-14 00:16:30
【问题描述】：

当 ng 类位于输入字段上时，我难以定位输入占位符文本。我能够标记输入背景颜色，但不能标记占位符文本颜色。任何帮助都会很棒。

HTML：

<form class="my-form">
  <input type="text" placeholder="Quick test" required/>
</form>

文字：

.my-form {
 input.ng-invalid.ng-touched {
 background: #efefef;
 ::-webkit-input-placeholder {
  color: #FF0000;
 }
 :-moz-placeholder {
  color: #FF0000;
 }
 ::-moz-placeholder {
  color: #FF0000;
 }
 :-ms-input-placeholder {
  color: #FF0000;
  }
 }
}

Angular 添加到所需元素的类

<input type="text" placeholder="Quick test" required="" 
class="ng-pristine ng-invalid ng-invalid-required ng-touched">

【问题讨论】：

标签： html css angularjs

【解决方案1】：

将 ng-class 添加到供应商前缀就可以了。

HTML：

<input type="text" placeholder="Quick test" required="" 
class="ng-pristine ng-invalid ng-invalid-required ng-touched">

文字：

.ng-touched::-webkit-input-placeholder { color: red; }
.ng-untouched::-webkit-input-placeholder { color: #cccccc; }
/* add additional vendor prefixes or utilize mixin */

【讨论】：

【解决方案2】：

我在输入占位符上添加了一个 ng-class 条件

css:

.colorwhiteinput::-webkit-input-placeholder {
    /* WebKit, Blink, Edge */
    color: #ffffff;
}
.colorwhiteinput:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #ffffff;
    opacity: 1;
}
.colorwhiteinput::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #ffffff;
    opacity: 1;
}
.colorwhiteinput:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: #ffffff;
}

html:

<input class="flexsearch--input"  ng-class="({put condition here without curve brackets}) ? 'colorwhiteinput' : ''" type="search" placeholder="search" ng-model="searchTerm" name="searchTerm">

所以只需使用 colorwhiteinput 来访问占位符元素。 css 中 colorwhiteinput 之后的所有内容都只是针对，所以不要更改 ::-webkit-input-placeholder 等。

【讨论】：