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

Question

我正在编写一个移动网站，并使用 sass 对其进行样式设置。

我想更改文本输入的占位符颜色，但我不能这样做。

这是占位符的mixin

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

然后我将它包含在一个类中

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

最后将类设置为输入

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

但是什么也没发生。此外，我的 IDE 在 mixins 行上设置了一个错误，告诉我：“未知的伪选择器 -webkit-input-placeholder”，而 chrome 似乎无法识别该标签。

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

提前致谢。

Answer 1

你不能单独使用它，只能和选择器一起使用：

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

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

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

混音：

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

用法：

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

Live example

P.S.不要一起使用它们（这个选择器坏了，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;
}