2368 votos

Cambiar una entrada ' s color de marcador de posición de HTML5 con CSS

Chrome soporta el atributo placeholder en input[type=text] elementos (los demás, probablemente no demasiado).

Pero el siguiente CSS no hace diddly cuclillas para el marcador de posición del valor:

CSS:

input[placeholder], [placeholder], *[placeholder] {
   color:red !important;
}

Código HTML:

<input type="text" placeholder="Value" />

Value seguirá siendo gris en lugar de rojo.

Hay una manera de cambiar el color del texto de marcador de posición?

Yo ya estoy usando jQuery marcador de posición de plugin para los navegadores que no soportan el atributo placeholder de forma nativa.

3309voto

toscho Puntos 29302

Aplicación

Hay tres implementaciones diferentes: pseudo-elementos y pseudo-clases, y nada.

Es decir, hasta la versión 9 y Ópera hasta la versión 12 no son compatibles con el selector CSS para marcadores de posición.

La discusión acerca de la mejor aplicación está todavía en curso. Nota : los pseudo-elementos actúan como elementos reales en la Sombra DOM. Un padding en input no tendrá el mismo color de fondo como el pseudo-elemento.

Los selectores de CSS

Los agentes de usuario son necesarios para ignorar una regla con un desconocido selector. Ver Los Selectores De Nivel 3:

un grupo de selectores que contiene un selector no válido no válido.

Así que necesitamos normas separadas para cada navegador. De lo contrario, todo el grupo iba a ser ignorado por todos los navegadores.

::-webkit-input-placeholder { /* WebKit browsers */
    color:    #909;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #909;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #909;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
   color:    #909;
}
<input placeholder="Stack Snippets are awesome!">

Notas de uso

  • Tenga cuidado para evitar malos contrastes. Firefox marcador de posición parece ser incumplidora con una opacidad reducida, por lo que necesita usar opacity: 1 aquí.
  • Nota que el texto de marcador de posición se acaban de cortar si no se ajusta el tamaño de tus elementos de entrada en em y prueba de ellos con gran tamaño de letra mínimo de configuración. No olvides traducciones: en algunos idiomas necesita más espacio para la misma palabra.
  • Los navegadores con soporte HTML para placeholder pero sin soporte para CSS para los que (como Opera) debe ser probado demasiado.
  • Algunos navegadores utilizan por defecto adicionales CSS para algunos input tipos (email, search). Estos podrían afectar a la representación de formas inesperadas. Utilizar las propiedades -webkit-appearance y -moz-appearance a cambio de que. Ejemplo:
    [type="search"] {
        -moz-appearance:    textfield;
        -webkit-appearance: textfield;
        appearance: textfield;
    }

431voto

brillout.com Puntos 2289
*::-webkit-input-placeholder {
    color: red;
}
*:-moz-placeholder {
    /* FF 4-18 */
    color: red;
}
*::-moz-placeholder {
    /* FF 19+ */
    color: red;
}
*:-ms-input-placeholder {
    /* IE 10+ */
    color: red;
}

inputtextareamarcadores de posición.

JSFiddle Demo

No estas reglas del grupo y hacer una regla independiente para cada selector (un selector inválido en un grupo hace todo el grupo no válido)

184voto

Matt Puntos 1035

Quizá desee también a áreas de texto de estilo:

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  color: #636363;
}
input:-moz-placeholder, textarea:-moz-placeholder {
  color: #636363;
}

61voto

John Catterfeld Puntos 6614

Además de la respuesta de toscho he notado algunas inconsistencias webkit entre Chrome 9-10 y Safari 5 con las propiedades CSS compatibles que vale la pena resaltar.

No son compatibles con específicamente Chrome 9 y 10 background-color , border , text-decoration y text-transform estilo cuando el marcador de posición.

La comparación completa navegadores es aquí.

51voto

Paweld2 Puntos 411

Para bootstrap menos usuarios, existe un mixin .placeholder:

// Placeholder text
// -------------------------
.placeholder(@color: @placeholderText) {
  &:-moz-placeholder {
    color: @color;
  }
  &:-ms-input-placeholder {
    color: @color;
  }
  &::-webkit-input-placeholder {
    color: @color;
  }
}

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by: