La modifica del colore segnaposto HTML5 di un input con CSS non funziona su Chrome

Question

Ho provato a seguire il seguente argomento, ma senza successo. Change an HTML5 input's placeholder color with CSS

Ho provato a colorare il mio segnaposto, ma rimane grigio su Chrome 17.0.963.56 m.

HTML

<input type='text' name='test' placeholder='colorize placeholder' value='' /> 

CSS

INPUT::-webkit-input-placeholder, 
INPUT:-moz-placeholder { 
    color:red; 
} 
input[placeholder], [placeholder], *[placeholder] 
{ 
    color:green !important; 
} 

JSfiddle

• http://jsfiddle.net/F4xfV/1/

Su Firefox 10.0.2, funziona bene.

Answer 1

Hai dimenticato un :. Per questo motivo, l'intero selettore è stato danneggiato e non ha funzionato. http://jsfiddle.net/a96f6/87/

Edit: Sembra come (? Dopo un aggiornamento) questo non funziona più, provate questo:

input::-webkit-input-placeholder{ 
    color:red; 
} 
input:-moz-placeholder { 
    color:red; 
} 

Nota: non mischiare i selettori prefisso vendor (-moz, -webkit , -Signorina, ...). Ad esempio, Chrome non capisce "-moz-" e quindi ignora l'intero selettore.

Modifica di chiarimenti: per farlo funzionare in tutti i browser, utilizzare questo codice:

::-webkit-input-placeholder { 
    color:red; 
} 

::-moz-placeholder { 
    color:red; 
} 

::-ms-placeholder { 
    color:red; 
} 

::placeholder { 
    color:red; 
} 

Answer 2

::-webkit-input-placeholder { 
    color: #008000; 
} 

Answer 3

Come ha detto @alex, per qualche motivo non è possibile combinare i selettori per più browser.

Questo funzionerà

::-webkit-input-placeholder { 
    color:red; 
} 

::-moz-placeholder { 
    color:red; 
} 

::-ms-placeholder { 
    color:red; 
} 

::placeholder { 
    color:red; 
} 

Ma questo non funziona (in Chrome, almeno):

::-webkit-input-placeholder, 
::-moz-placeholder, 
::-ms-placeholder, 
::placeholder { 
    color:red; 
} 

Sembra un capriccio implementazione browser per me.

Inoltre, si noti che non è necessario definire stili segnaposto globalmente, è comunque possibile impostare il selettore ::placeholder come proprio normalmente. Questo funziona:

.my-form .input-text::-webkit-input-placeholder { 
    color:red; 
} 

.my-form .input-text::-moz-placeholder { 
    color:red; 
} 

Answer 4

Ho appena avuto lo stesso problema e ho pensato che sarebbe stato bello condividere. Per qualche ragione, il colore non stava cambiando su Firefox e ho notato che il suo solo quando uso valori esadecimali così ho fatto in questo modo per un particolare sito web:

::-webkit-input-placeholder { 
    color: #666666; 
} 

::-moz-placeholder { 
    color: black; 
} 

::-ms-placeholder { 
    color: #666666; 
} 

::placeholder { 
    color: #666666; 
}