:placeholder-shown

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Experimental: 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).

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

Sintaxis

Error: could not find syntax for this item

Ejemplos

Ejemplo básico

HTML

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

CSS

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

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

CSS

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

Resultado

Especificaciones

Specification
Selectors Level 4
# placeholder

Compatibilidad con navegadores

BCD tables only load in the browser

Ver también