¿Cómo resolver la diferencia CSS de marcador de posición en diferentes navegadores?

Question

Estoy usando Twitter bootstrap CSS. A continuación puede ver cómo se muestra el mismo código de manera diferente con Firefox y Chrome.

Esto es bastante extraño. Firebug me dice que el código CSS del marcador de posición se establece como esto a gris claro:

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

Esto debería afectar a todos los marcadores de posición dentro de todos los elementos como se hace correctamente en Chrome. Pero en Firefox, ¿por qué se aplica textareas correctamente, pero input no? ¿Cómo puedo arreglar esto?

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

actualización:

Los comentarios a continuación me dio una idea:

Input ha diferencia de textareacolor: #9999 la entrada tachado, lo que significa algo que está anulando.

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

De hecho, es color: #555555;. Cuando lo desactivo en Firebug, todo funciona. ¿Cómo es que a Chrome no le importa esto, pero Firefox sí? ¿Algún consejo sobre cómo solucionar esto en ambos navegadores? Todavía soy nuevo en css.

Answer 1

Hace un tiempo hice un poco de violín debido a este extraño pseudo-elemento, ¿el resultado? No puedes agregar un coma entre el selector, tienes que especificar tu regla dos veces, eso es una pena.

El 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" />​ 

El 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

Borre su caché de Firefox (puede ser suficiente).

e inspeccionar con Firebug

instalar Firebug si no se hace allready https://addons.mozilla.org/en-US/firefox/addon/firebug/

haga clic derecho en la entrada, y haga clic en Inspeccionar elemento con Firebug.

para ver si hay una propiedad CSS con una prioridad más alta.

Answer 3

como una actualización a continuación una lista completa de los marcadores de posición que necesita para su uso. : -moz está en desuso en las versiones más nuevas de Firefox.

Debe especificar las reglas varias veces y no puede combinarlas en una sola línea. Esto se debe al hecho de que el navegador los interpretará como un solo selector. Causará un error porque Firefox no conoce la regla 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

El problema es que Firefox cambiar la opacidad del campo, y con eso creo que es un color diferente, pero no es ... añadir "opacidad: 1;" y funcionará exactamente igual en todos los navegadores

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

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