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 for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Soporte básico
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 51Chrome Android ? Edge Mobile Sin soporte No
Notas
Sin soporte No
Notas
Notas This feature is not implemented. See this enhancement request.
Firefox Android Soporte completo 51
Soporte completo 51
Sin soporte 4 — 51
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : :-moz-placeholder
Opera Android ? Safari iOS Soporte completo 9.2Samsung Internet Android ?
Support on non-type="text" elements (such as type="number" or type="time")
Experimental
Chrome ? Edge Sin soporte NoFirefox Soporte completo SiIE Sin soporte NoOpera ? Safari Soporte completo SiWebView Android ? Chrome Android ? Edge Mobile Sin soporte NoFirefox Android Soporte completo SiOpera Android ? Safari iOS Soporte completo SiSamsung Internet Android ?

Leyenda

Soporte completo  
Soporte completo
Sin soporte  
Sin soporte
Compatibility unknown  
Compatibility unknown
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

Etiquetas y colaboradores del documento

Colaboradores en esta página: lajaso
Última actualización por: lajaso,