:: - webkit-input-placeholder does not work

Question

I write mobile websites and I look after him with sass.

I would like to change the label color of a textinput object, but I cannot do this.

This is mixin for 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 in the class

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

Finally, set the class to input

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

But nothing happens. Also, my IDE fixed an error on mixins lines that tell me: "Unknown pseudo-sector -webkit-input-placeholder" and chrome don't seem to recognize this tag.

How can I change the color of the placeholder? Regardless of whether the response is in sass or css.

Thanks in advance.

Answer 1

You cannot use it alone, only with a 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} } 

Using

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

Living example

PS Do not use them all together (this selector is broken and the css parser will always fail):

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