:: - webkit-input-placeholder funktioniert nicht

Question

ich schreibe eine mobile Websites und ich style es mit Hass.

Ich möchte die Platzhalterfarbe des Textinput ändern, aber ich bin nicht in der Lage, dies zu tun.

Dies ist der mixin für den Platzhalter

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

Und dann benutze ich sie in eine Klasse enthalten

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

Schließlich

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

aber nichts, um die Klasse auf den Eingang eingestellt das passiert. Außerdem hat meine IDE einen Fehler in den Mixins-Zeilen gesetzt, der mich sagt: "Unbekannter Pseudo-Selektor -webkit-Eingabeplatzhalter" und Chrome scheint diesen Tag nicht zu erkennen.

Wie kann ich die Farbe des Platzhalters ändern? Egal ob die Antwort in Sass oder CSS ist.

Vielen Dank im Voraus.

Answer 1

Sie können nicht einzelne verwenden, nur mit Wahl:

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

Nutzungs:

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

Live example

P.S. Verwenden Sie sie nicht alle zusammen (dieser Selektor ist gebrochen und CSS-Parser wird nicht immer):

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