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