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