2013-08-24 11 views
8

Ho cambiato il colore del carattere segnaposto di un campo di input in blu, l'ho provato in Chrome, il suo colore è blu. Ma in FF 23.0.1, il colore è leggermente più "leggero" del blu.Colore carattere della differenza di segnaposto tra Firefox 23.0.1 Chrome 23.0.1271.64 e IE 8

vedere il contrasto di sotto, si noti il ​​"Mese" è all'interno di un arco e il colore è anche blu:

In Chrome, va bene, vedi sotto:

enter image description here

Tuttavia, in Firefox 23.0.1, si presentava così:

enter image description here

In IE8, non visualizzazione:

enter image description here

Nota la differenza del colore.

Di seguito si riporta il codice CSS che sto usando:

.month_span { color: blue; } 
.input::-webkit-input-placeholder { color:blue} 
.input::-moz-placeholder { color:blue; } /* FF 19+ */ 
.input:-moz-placeholder { color:#bbb; } /* FF 18- */ 
.input:-ms-input-placeholder { color:#bbb; } 

mia domanda: 1. Perché il colore è più leggero in FF? 2. Come visualizzare il valore del segnaposto in IE?

+1

ingressi stile è sempre un'esperienza frustrante. Soprattutto se stai cercando di farli sembrare uguali tra i vari browser. È uno sforzo coraggioso, ma in realtà non perderei troppo tempo. –

+0

Oh, ti vedo dire IE8. Secondo [MDN] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input), il segnaposto è supportato solo da IE10 e versioni successive. –

+0

Qualche ragione per la differenza di colore, pensi? – JavaScripter

risposta

20

L'attributo placeholder non è supportato da IE fino a IE 10, quindi questo lo spiega.

Firefox si applica a quanto pare opacity:0.54 al testo segnaposto: http://css-tricks.com/snippets/css/style-placeholder-text/

Ciò risolverà:

.input::-moz-placeholder { color:blue; opacity: 1; } /* FF 19+ */ 
.input:-moz-placeholder { color:#bbb; opacity: 1; } /* FF 18- */ 
+0

Grazie! Questo è utile! Risolto! – JavaScripter

+0

Grazie mille !!! – EliSherer

+0

nota: attualmente l'opacità predefinita per il segnaposto in FF è 0.4 - https://developer.mozilla.org/en-US/docs/Web/CSS/::-moz-placeholder – nevermind

Problemi correlati