与NG类风格的输入占位符的色彩风格 [英] Style input placeholder color style with ng-classes

问题描述

我有目标的输入占位符文本困难的时候NG类是在输入栏上。我能够taget投入的背景颜色，但不是占位符文本颜色。任何帮助将是巨大的。

HTML

 ＆LT;窗​​体类=我型＆GT;
  ＆LT;输入类型=文本占位符=快速检测要求/＆GT;
＆LT; /表及GT;
 

SCSS：

 。我的形式{
 input.ng-invalid.ng触摸{
 背景：#EFEFEF;
 ::  -  WebKit的输入占位符{
  颜色：＃FF0000;
 }
 ：-moz-占位符{
  颜色：＃FF0000;
 }
 ::  -  MOZ占位符{
  颜色：＃FF0000;
 }
 ：-ms输入占位符{
  颜色：＃FF0000;
  }
 }
}
 

角类增加了一个必需的元素

 ＆LT;输入类型=文本占位符=快速检测要求=
类=NG-原始NG-无效NG-无效要求的NG-感动＆GT;
 

解决方案

添加纳克级的供应商preFIX的伎俩。

HTML

 ＆LT;输入类型=文本占位符=快速检测要求=
类=NG-原始NG-无效NG-无效要求的NG-感动＆GT;
 

SCSS：

  .ng-感动::  -  WebKit的输入占位符{颜色：红色; }
.ng-不变::  -  WebKit的输入占位符{颜色：#CCCCCC; }
/ *添加额外的供应商prefixes或利用混入* /
 

I am having difficulties targeting an input placeholder text when the ng classes are on an input field. I am able to taget the inputs background color but not the placeholder text color. Any assistance would be great.

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;
  }
 }
}

Classes Angular adds to a required element

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

解决方案

Adding the ng-class to the vendor prefix does the trick.

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 */

这篇关于与NG类风格的输入占位符的色彩风格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！