::-webkit-input-placeholder 不起作用

Question

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

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

这是占位符的混入

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

然后我用它包含在 class

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

最后将class设置为输入

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

但是没有任何反应。此外，我的 IDE 在 mixins 行上设置了一个错误，说我："Unknown pseudo selector -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;
}

::-webkit-input-placeholder 不起作用

::-webkit-input-placeholder does not work

html

css

sass

webkit

placeholder