: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 enero de 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
Error: could not find syntax for this itemEjemplos
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 |
|---|
| HTML # selector-placeholder-shown |
| Selectors Level 4 # placeholder-shown-pseudo |
Compatibilidad con navegadores
Loading…
Ver también
- El pseudo-elemento
::placeholderestiliza el placeholder por sí mismo. - Elementos HTML relacionados:
<input>,<textarea> :-moz-placeholder,::-moz-placeholder- Formularios HTML