:: - il segnaposto di input webkit non funziona

Question

sto scrivendo un sito Web mobile e lo sto personalizzando con sass.

Vorrei cambiare il colore del segnaposto del textinput, ma non sono in grado di farlo.

Questa è la mixin per il segnaposto

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

E poi lo uso incluso in una classe

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

Infine impostare la classe all'ingresso

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

Ma niente accade. Inoltre, il mio IDE ha impostato un errore sulle linee dei mixin che mi dicevano: "Pseudo selettore sconosciuto -webkit-input-placeholder" e chrome sembra non riconoscere quel tag.

Come posso cambiare il colore del segnaposto? Non importa se la risposta è in sass o css.

Grazie in anticipo.

Answer 1

Non è possibile utilizzarlo solo, solo con selettore:

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

Uso:

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

Live example

P.S. non tutti utilizzati insieme (questo selettore è rotto e css parser fallisce sempre):

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