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条件

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等。

样式输入占位符颜色样式与ng-classes

1 个答案: