:placeholder-shown

Esta es una tecnología experimental
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en producción.

La pseudo-clase :placeholder-shown de CSS  representa cualquier elemento <input> o <textarea> que esté mostrando actualmente el texto de marcador de posición (placeholder).

/* Selecciona cualquier elemento con un placeholder activo */
:placeholder-shown {
  border: 2px solid silver;
}

Sintaxis

:placeholder-shown

Ejemplos

Ejemplo básico

HTML

<input placeholder="¡Escribe algo aquí!">

CSS

input {
  border: 2px solid black;
  padding: 3px;
}

input:placeholder-shown {
  border-color: silver;
}

Resultado

Texto desbordante

En pantallas angostas como teléfonos inteligentes, el ancho de los cuadros de búsqueda y otros campos de formulario pueden acortarse drásticamente. Esto puede provocar que el texto de marcador de posición se recorte de una manera no deseada. A menudo es útil alterar este comportamiento con la propiedad text-overflow.

HTML

<input placeholder="¡Ingresa algo en este campo, por favor!">

CSS

input:placeholder-shown {
  text-overflow: ellipsis;
}

Resultado

Especificaciones

Especificación Estado Comentarios
Selectors Level 4
La definición de ':placeholder-shown' en esta especificación.
Working Draft Definición Inicial.

Compatibilidad con navegadores

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome para AndroidFirefox para AndroidOpera para AndroidSafari en iOSSamsung Internet
:placeholder-shown
Experimental
Chrome Soporte completo 47Edge Sin soporte No
Notas
Sin soporte No
Notas
Notas This feature is not implemented. See this enhancement request.
Firefox Soporte completo 51
Soporte completo 51
Sin soporte 4 — 51
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : :-moz-placeholder
IE Soporte completo 10
Nombre alternativo
Soporte completo 10
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : :-ms-input-placeholder
Opera Soporte completo 34Safari Soporte completo 9WebView Android Soporte completo 47Chrome Android Soporte completo 47Firefox Android Soporte completo 51
Soporte completo 51
Sin soporte 4 — 51
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : :-moz-placeholder
Opera Android Soporte completo SiSafari iOS Soporte completo 9Samsung Internet Android Soporte completo 5.0
Support on non-type="text" elements (such as type="number" or type="time")
Experimental
Chrome Soporte completo 47Edge Sin soporte NoFirefox Soporte completo 51IE Sin soporte NoOpera Soporte completo 34Safari Soporte completo 9WebView Android Soporte completo 47Chrome Android Soporte completo 47Firefox Android Soporte completo 51Opera Android Soporte completo 34Safari iOS Soporte completo 9Samsung Internet Android Soporte completo 5.0

Leyenda

Soporte completo  
Soporte completo
Sin soporte  
Sin soporte
Experimental. Esperar que el comportamiento cambie en el futuro.
Experimental. Esperar que el comportamiento cambie en el futuro.
Ver notas de implementación.
Ver notas de implementación.
Usa un nombre no estandar.
Usa un nombre no estandar.

Ver también