::-webkit-input-placeholder does not work

Question

i'm writing a mobile web sites and i'm styling it with sass.

I would like to change the placeholder color of textinput, but i'm not able to do this.

This is the mixin for the placeholder

@mixin placeholder($color) {
  ::-webkit-input-placeholder {color: $color}
  :-moz-placeholder           {color: $color}
  ::-moz-placeholder          {color: $color}
  :-ms-input-placeholder      {color: $color}
}

And then i use it included into a class

.input-class {
    @include placeholder(#FFFFFF);
}

Finally set the class to the input

<input class="input-class" ...>

But nothing happens. In addition my IDE set an error on the mixins lines saying me: "Unknown pseudo selector -webkit-input-placeholder" and chrome seems to not recognize that tag.

How can I change the color of placeholder? No matter if the response is in sass or css.

Thanks in advance.

Answer 1

You can't use it single, only with selector:

input::-webkit-input-placeholder {
    color: #9B9B9B;
}

input:-ms-input-placeholder {
    color: #9B9B9B;
}

input::-moz-placeholder {
    color: #9B9B9B;
}

Mixin:

@mixin placeholder($selector, $color) {
  #{$selector}::-webkit-input-placeholder {color: $color}
  #{$selector}::-moz-placeholder          {color: $color}
  #{$selector}:-ms-input-placeholder      {color: $color}
}

Usage:

@include placeholder('.input-class', #FFFFFF);

Live example

P.S. Do not use them all together (this selector is broken and css parser will always fails):

input::-webkit-input-placeholder,//Not WebKit will fails here
input:-ms-input-placeholder,//Not IE will fails here
input::-moz-placeholder {//Not Firefox will fails here
    color: #9B9B9B;
}