El ::placeholderpseudo elemento (o una pseudo clase, en algunos casos, dependiendo de la implementación del navegador) le permite aplicar estilo al texto del marcador de posición de un elemento de formulario. Como en, el texto configurado con el placeholderatributo:
Puede diseñar ese texto en la mayoría de los navegadores con este puñado de selectores con prefijo de proveedor:
::-webkit-input-placeholder ( /* Chrome/Opera/Safari */ color: pink; ) ::-moz-placeholder ( /* Firefox 19+ */ color: pink; ) :-ms-input-placeholder ( /* IE 10+ */ color: pink; ) :-moz-placeholder ( /* Firefox 18- */ color: pink; )Advertencia importante: esta sintaxis no es estándar, por lo tanto, toda la locura de los nombres. No aparece en la especificación en absoluto. :placeholder-shownes estándar, e incluso los autores de especificaciones parecen pensar ::placeholderque será la versión estandarizada.
Como cualquier psuedo, puede limitarlo a elementos específicos según sea necesario, como:
input(type="email").big-dog::-webkit-input-placeholder ( color: orange; )Manifestación
La diferencia entre :placeholder-showny::placeholder
:placeholder-shownes para seleccionar la entrada en sí cuando se muestra su texto de marcador de posición. A diferencia de los ::placeholderestilos del texto del marcador de posición.
Aquí hay un diagrama:
Encontré esto muy confuso como:
- las especificaciones solo tienen
:placeholder-showny no::placeholder :placeholder-shownaún puede afectar el estilo del texto del marcador de posición, ya que es un elemento principal (por ejemplo, tamaño de fuente).
Tenga en cuenta que :placeholder-shownes un pseudo clase (que es un elemento en un estado en particular) y ::placeholderes un pseudo elemento (una cosa visible que no está realmente en el DOM). Distinguible por dos puntos simples y dobles.
Tab Atkins me lo aclaró por correo electrónico:
: placeholder-shown, al ser una pseudo-clase, tiene que seleccionar un elemento existente; selecciona la entrada siempre que esté en el estado de visualización de marcador de posición. El pseudoelemento :: marcador de posición envuelve el texto real del marcador de posición.
¿Elemento o clase?
Esta funcionalidad no está estandarizada. Eso significa que cada navegador tiene una idea diferente sobre cómo debería funcionar.
Firefox implementó originalmente esto como una pseudoclase, pero lo cambió por varias razones. Para abreviar la historia, no se puede hacer tanto con una pseudoclase.
Por ejemplo, si desea cambiar el color del texto cuando la entrada está enfocada. Usaría un selector como input:focus::placeholder, lo que no podría hacer con una pseudoclase (no se apilan de la misma manera).
IE10 admite esto como una pseudoclase, en lugar de un elemento. Todos los demás han implementado un pseudo elemento.
Color del marcador de posición de Firefox
Es posible que observe cómo en Firefox el color del marcador de posición parece difuminado en comparación con otros navegadores. En la imagen de abajo, Firefox 43 se muestra a la izquierda, mientras que Chrome 47 se muestra a la derecha:
Esto se debe a que, de forma predeterminada, todos los marcadores de posición en Firefox tienen un valor de opacidad aplicado, por lo que para solucionar esto, debemos restablecer ese valor:
::-moz-placeholder ( opacity: 1; )Puedes ver más probando esta demostración en Firefox.
Estilos admitidos
El pseudo elemento admite el estilo de estas propiedades:
fontpropiedadescolorbackgroundpropiedadesword-spacingletter-spacingtext-decorationvertical-aligntext-transformline-heighttext-indentopacity
La pseudoclase también admite la mayoría (si no todas) de estas propiedades, pero no es tan flexible por las razones descritas anteriormente.
Soporte de navegador
Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.
Escritorio
| Cromo | Firefox | ES DECIR | Borde | Safari |
|---|---|---|---|---|
| 57 | 19 * | No | 79 | 10.1 |
Móvil / Tablet
| Android Chrome | Android Firefox | Androide | Safari de iOS |
|---|---|---|---|
| 88 | 85 | 81 | 10,3 |
Propiedades relacionadas
Almanaque el 22 de mayo de 2020: marcador de posición mostrado
input:placeholder-shown ( border: 5px solid red; ) 
Geoff Graham