Lapseudo-clase:placeholder-shown deCSS representa cualquier elemento<input> o<textarea> que esté mostrando actualmente eltexto de marcador de posición (placeholder).

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

Sintaxis

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 propiedadtext-overflow.

HTML

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

CSS

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

Resultado

Especificaciones

Compatibilidad con navegadores

Ver también

• El pseudo-elemento::placeholder estiliza el placeholderpor sí mismo.
• Elementos HTML relacionados:<input>,<textarea>
• :-moz-placeholder,::-moz-placeholder
• Formularios HTML