2013-10-27 21 views
19

Ho un testo all'interno di un campo placeholderinput forma che non riesco a cambiare colore a white, si esce come grey ma solo su firefox. Il browser Chrome sembra andare bene.

css - segnaposto colore del testo su Firefox

Quando si digita nel campo il display a colori corretto, è solo il placeholder iniziale che non è reattivo.

Qualsiasi aiuto sarà apprezzato per favore, grazie.

css:

input#myinput::-webkit-input-placeholder { 
    color:#FFF; background-color:#CCC; 
} 
input#myinput::-moz-placeholder { 
    color:#FFF; background-color:#CCC; 
} 
input#myinput:-moz-placeholder { 
    color:#FFF; background-color:#CCC; 
} 
input#myinput::-ms-input-placeholder { 
    color:#FFF; background-color:#CCC; 
} /* IE10+ */ 

input[type="text"]{ 
    width:170px; height:16px; padding:12px 5px; border:none; 
    color:#FFF; font:14px/14px 'Arial', Helvetica, sans-serif; 
    text-align:center; background-color:#CCC; 
} 

Heres my fiddle

+0

ho il sospetto che sia più giù per il rendering dei caratteri differenze di qualsiasi altra cosa, anche se altri colori sembrano un po 'slavato'. –

risposta

64

Aggiungi opacity: 1 ai segnaposti di Firefox.

V. aggiornamento fiddle

2

Prova

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

:-moz-placeholder { /* Firefox 18- */ 
    color: #fff; 
} 

::-moz-placeholder { /* Firefox 19+ */ 
    color: #fff; 
} 

:-ms-input-placeholder { 
    color: #fff; 
} 
+0

ce l'ho, non è lo stesso del mio css? –

+0

Questa è una risposta corretta. –

+0

Non so perché è stato votato. È giusto rispondere – Mohit

1
//PLACEHOLDER EXAMPLE 

::-webkit-input-placeholder { /* WebKit, Blink, Edge */ 
    color: #666; 
} 
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 
    color: #666; 
    opacity: 1; 
} 
::-moz-placeholder { /* Mozilla Firefox 19+ */ 
    color: #666; 
    opacity: 1; 
} 
:-ms-input-placeholder { /* Internet Explorer 10-11 */ 
    color: #666; 
} 
Problemi correlati