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

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Soporte básico47 No1

51

4 — 512

No349
Support on non-type="text" elements (such as type="number" or type="time") ? No No No ? ?
FeatureAndroid webviewChrome para AndroidEdge mobileFirefox para AndroidOpera AndroidiOS SafariSamsung Internet
Soporte básico51 ? No1

51

4 — 512

No9.2 ?
Support on non-type="text" elements (such as type="number" or type="time") ? ? ? No No ? ?

1. This feature is not implemented. See this enhancement request.

2. Supported as :-moz-placeholder.

Ver también

Etiquetas y colaboradores del documento

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