::-webkit-input-placeholder不起作用 [英] ::-webkit-input-placeholder does not work

问题描述

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

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

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

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

这是占位符的混合

@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似乎无法识别该标记.

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.

如何更改占位符的颜色?无论响应是在sass还是css中.

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

谢谢.

推荐答案

您不能单独使用它，只能与选择器一起使用:

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

用法:

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

实时示例

PS (不要同时使用它们)(此选择器已损坏，css解析器将始终失败):

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

这篇关于::-webkit-input-placeholder不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！