:placeholder-shown

Experimental

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

La pseudo-clase (en-US) :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

BCD tables only load in the browser

Ver también