Come risolvere la differenza CSS segnaposto tra diversi browser?

Question

Sto usando Twitter bootstrap CSS. Qui sotto puoi vedere come lo stesso codice viene visualizzato in modo diverso con FireFox e Chrome.

Questo è piuttosto strano. Firebug mi dice che il CSS del segnaposto è impostato in questo modo al grigio chiaro:

:-moz-placeholder { 
    color: #999999; 
} 

Questo dovrebbe interessare tutti i segnaposto all'interno di tutti gli elementi come correttamente fatto in Chrome. Ma in Firefox perché lo textareas è correttamente applicato, ma input no? Come posso risolvere questo?

<input id="id_referred_by" type="text" maxlength="50" name="referred_by" placeholder="...was referred by?"> 

<textarea id="id_contacts_interests" name="contacts_interests" cols="40" placeholder="Any particular interests?" rows="4"></textarea> 

Chrome:

Firefox:

aggiornamento:

I commenti che seguono mi ha dato un'idea:

Input ha a differenza textarea l'entrata color: #9999 sbarrata, il che significa che qualcosa è prevalente esso.

select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input { 
    color: #555555; 
    display: inline-block; 
    font-size: 13px; 
    height: 18px; 
    line-height: 18px; 
    margin-bottom: 9px; 
    padding: 4px; 
} 

È infatti questo color: #555555;. Quando lo disattivo in firebug, tutto funziona. Come mai a Chrome non interessa questo, ma Firefox? Qualche consiglio su come risolvere questo problema su entrambi i browser? Sono ancora nuovo di css.

Answer 1

Ho fatto un po 'di violino qualche tempo fa a causa di questo strano pseudo-elemento, il risultato? Non è possibile aggiungere una virgola tra il selettore, è necessario specificare la regola due volte, è un peccato.

Il codice HTML:

<input type="text" id="test-webkit" placeholder="test-webkit" /><br /> 
<input type="text" id="test-moz" placeholder="test-moz" /><br /> 
<input type="text" id="test-both" placeholder="test-both" /><br /> 
<input type="text" class="test-both" placeholder="test-both-separately" />​ 

Il CSS:

/* Works on Webkit */ 
#test-webkit::-webkit-input-placeholder { 
    color: red; 
} 

/* Works on Firefox */  
#test-moz:-moz-placeholder { 
    color: red; 
} 

/* Don't work */ 
#test-both::-webkit-input-placeholder, #test-both:input:-moz-placeholder { 
    color: red; 
} 

/* Works on both */ 
.test-both::-webkit-input-placeholder { 
    color: red; 
} 
.test-both:-moz-placeholder { 
    color: red; 
}​ 

The Fiddle.

Answer 2

Cancella la cache di Firefox (potrebbe essere sufficiente).

e ispezionare con Firebug

installare Firebug, se non è giá fatto https://addons.mozilla.org/en-US/firefox/addon/firebug/

tasto destro del mouse sull'ingresso, e fare clic su Inspect Element con Firebug.

per vedere se c'è una proprietà css con una priorità più alta.

Answer 3

come un aggiornamento di seguito la lista completa dei segnaposto è necessario utilizzare. : -moz è deprecato nelle versioni più recenti di Firefox.

È necessario specificare le regole più volte e non è possibile combinarle su una singola riga. Ciò è dovuto al fatto che il browser li interpreterà come un singolo selettore. Causerà un errore perché Firefox non conosce la regola del webkit.

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { 
    color:#bbb; 
    font: 12px Verdana, Arial,Tahoma, sans-serif; 
} 
input:-moz-placeholder, textarea:-moz-placeholder { 
    color:#bbb; 
    font: 12px Verdana, Arial,Tahoma, sans-serif; 
} 
input::-moz-placeholder, textarea::-moz-placeholder { 
    color:#bbb; 
    font-family: 12px Verdana, Arial,Tahoma, sans-serif; 
    font: normal; 
} 
input:-ms-input-placeholder, textarea:-ms-input-placeholder { 
    color:#bbb; 
    font: 12px Verdana, Arial,Tahoma, sans-serif; 
} 

Answer 4

Il problema è che Firefox modificare l'opacità del campo, e con questo si pensa che la sua un colore diverso, ma la sua non ... aggiungere "opacità: 1;" e funzionerà esattamente la stessa in tutti i browser

input:-moz-placeholder { 
    color: #999999; 
    opacity: 1; 
} 

input::-moz-placeholder { 
    color: #999999; 
    opacity: 1; 
}