html - color - Los marcadores de posición de entrada de texto no se muestran en IE y Firefox

placeholder html

Question

Mis marcadores de posición de entrada de texto se niegan a mostrar en IE y Firefox a pesar de haber usado el atributo -moz-placeholder. Esto se puede ver en la página de contacto aquí si está utilizando Firefox o IE.

¿Puede alguien ayudarme? He estado tratando de resolver esto durante semanas. Una muestra de mi código está abajo:

 input::-moz-placeholder, textarea::-moz-placeholder {
color: #aaa;
font-size: 18px;
}
input:-ms-input-placeholder, textarea::-ms-input-placeholder {
color: #aaa;
font-size: 18px;
}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
color: #aaa;
font-size: 18px;
}

Answer 1

Como luke2012 indicó, esto sucede cuando box-sizing: border-box; se está utilizando en los campos de entrada de tipo de texto. Sin embargo, esto solo ocurre cuando se está utilizando una altura fija (como en el marco de Bootstrap) y hay mucho relleno superior e inferior. Lo que no solo evita que se muestre el texto de los marcadores de posición, sino que también ingresa texto en Firefox.

Me parece que la mejor solución es mantener box-sizing: border-box; y en su lugar, elimine el relleno superior e inferior y aumente la altura hasta la altura total que desea que tenga el campo de entrada (incluido cualquier borde).

input[type="email"], input[type="password"], input[type="text"]
{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height: 42px; // Increase height as required
margin-bottom: 30px;
padding: 0 20px; // Now only left & right padding
}

Esto mantiene las cosas más consistentes y funciona bien en marcos como Bootstrap.

Alternativamente, puede aumentar la altura fija o la height: auto; establecida height: auto; y ajuste el relleno superior e inferior según sea necesario.

Answer 2

Parece -moz-box-sizing está causando tu problema.

input[type="email"], input[type="password"], input[type="text"]
{
-moz-box-sizing: border-box; // remove this line
height: 25px;
margin-bottom: 30px;
padding: 20px;
}

La eliminación de la línea causará estragos en los tamaños de entrada para que pueda agregar una regla general para el tamaño de la caja a su CSS.

*, *:before, *:after {
-moz-box-sizing: border-box;
}

Answer 3

Trate de reducir los rellenos superiores e inferiores. De alguna manera el relleno vertical cubre el marcador de posición. No te olvides de configurar la height del elemento al 100% .

input[type="email"], input[type="password"], input[type="text"] { padding: 0 20px; height: 100%; }

Answer 4

::-webkit-input-placeholder { /* Chrome, Safari */
color: #aaa;
font-size: 18px;
}
:-moz-placeholder { /* Firefox 18- */
color: #aaa;
font-size: 18px;
}
::-moz-placeholder { /* Firefox 19+ */
color: #aaa;
font-size: 18px;
}
:-ms-input-placeholder { /* Internet Explorer */
color: #aaa;
font-size: 18px;
}