CSS : Selector de enfoque
Ejemplo
Seleccione y aplique estilo a un campo de entrada cuando se enfoca:
input:focus
{
background-color: yellow;
}
Más ejemplos de "Pruébelo usted mismo" a continuación.
Definición y uso
El :focus
selector se utiliza para seleccionar el elemento que tiene el foco.
Sugerencia: El selector :focus está permitido en elementos que aceptan eventos de teclado u otras entradas del usuario.
Versión: | CSS2 |
---|
Compatibilidad con navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con el selector.
Selector | |||||
---|---|---|---|---|---|
:focus | 4.0 | 8.0 | 2.0 | 3.1 | 9.6 |
Sintaxis CSS
:focus {
css declarations;
}
Más ejemplos
Ejemplo
Cuando se enfoca un <input type="text">, cambia gradualmente el ancho de 100px a 250px:
input[type=text] {
width: 100px;
transition: ease-in-out, width .35s ease-in-out;
}
input[type=text]:focus {
width: 250px;
}
páginas relacionadas
Tutorial CSS: Pseudoclases CSS