:: - webkit输入占位符不起作用

Question

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

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

这是占位符混入

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