:: - webkit-input-placeholder不起作用[重复]

This question already has an answer here:

这个问题在这里已有答案：

Concatenating nested classes using SASS [duplicate] 1 answer
使用SASS [duplicate] 1 answer连接嵌套类

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

我正在写一个移动网站，我正在用sass设计它。

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

我想更改textinput的占位符颜色，但我无法做到这一点。

This is the mixin for the placeholder

这是占位符的mixin

@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.

但没有任何反应。另外我的IDE在mixins行上设置了一个错误，说我：“未知的伪选择器-webkit-input-placeholder”和chrome似乎无法识别该标记。

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

如何更改占位符的颜色？无论响应是sass还是css。

Thanks in advance.

提前致谢。

1 个解决方案

#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):

附：不要一起使用它们（这个选择器坏了，css解析器总是会失败）：

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

#1