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

Question

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

HTML：

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

Scss：

.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">

Answer 1

将 ng-class 添加到供应商前缀可以解决问题。

HTML：

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

Scss：

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