: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).
/* 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 propiedad text-overflow
.
HTML
<input placeholder="¡Ingresa algo en este campo, por favor!" />
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
- El pseudo-elemento
::placeholder
estiliza el placeholder por sí mismo. - Elementos HTML relacionados:
<input>
,<textarea>
:-moz-placeholder
,::-moz-placeholder
- Formularios HTML