CODEWITHSUNDEEP
htmlcssangularjs
Galactic Ranger
Galactic Ranger

Reputation: 882

Style input placeholder color style with ng-classes

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

Upvotes: 2

Views: 11645

Answers (2)

tonsar
tonsar

Reputation: 71

I added a ng-class conditional on my input placeholder

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

So just put colorwhiteinput to access the placeholder elements. everything after colorwhiteinput in the css is just targeting so don't change the ::-webkit-input-placeholder etc.

Upvotes: 3

Galactic Ranger
Galactic Ranger

Reputation: 882

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

Upvotes: 5

Related Questions