:focus Selector: generalmente se aplica a elementos de formulario o elementos que se pueden enfocar usando el teclado o el mouse como cuadro de entrada, área de texto. Un elemento está en estado de enfoque mientras usamos la tecla «tabulador» del teclado para ese elemento en particular. El estado de enfoque será el mismo hasta que el usuario cambie la pestaña a otro elemento o haga clic.
Sintaxis:
:focus {
// CSS Property
}
Ejemplo: Este ejemplo ilustra el :selector de enfoque.
<!DOCTYPE html>
<html>
<head>
<title>Focus pseudo class</title>
<style>
div.one{
margin-left:40%;
margin-top: 10%;
}
h1{
color: green;
font-family: Arial, Helvetica, sans-serif;
letter-spacing: 2px;
}
button{
font-size: x-large;
padding: 10px;
border: 2px solid black;
}
button:focus{
color: green;
background-color: white;
font-style: italic;
}
</style>
</head>
<body>
<div class="one">
<h1>GeeksforGeeks</h1>
<button type="submit">
Focus or Click here
</button>
</div>
</body>
</html>
Producción
- Antes de enfocar el botón:
- Después de enfocar el botón:
Explicación: En el ejemplo anterior, use la siguiente propiedad CSS para configurar el selector de enfoque.
button:focus {
color: green;
background-color: white;
font-style: italic;
}
Esta propiedad CSS se utiliza para establecer el estilo del botón.
- El color del texto se cambiará a verde.
- El color de fondo del botón cambiará a blanco.
- El estilo de fuente se cambiará de normal a cursiva.
activo: generalmente se aplica en etiquetas de botones y anclas. Se activa cuando el usuario hace clic con el mouse. El estado de activo será el mismo hasta que el usuario mantenga presionado el mouse.
Sintaxis:
:active {
// CSS property
}
Ejemplo: Este ejemplo ilustra el selector :active.
<!DOCTYPE html>
<html>
<head>
<title>
:active pseudo class
</title>
<style>
div.one {
margin-left:40%;
margin-top: 10%;
}
h1 {
color: green;
font-family: Arial, Helvetica, sans-serif;
letter-spacing: 2px;
}
button {
font-size: x-large;
padding: 10px;
border: 2px solid black;
}
button:active {
color:white;
background-color: green;
font-family: 'Courier New', Courier, monospace
}
</style>
</head>
<body>
<div class="one">
<h1>GeeksforGeeks</h1>
<button type="submit">
Focus or Click here
</button>
</div>
</body>
</html>
Producción
- Antes del estado activo (antes de hacer clic en el botón):
- Después de hacer clic en el botón:
Explicación: En el ejemplo anterior, use la siguiente propiedad CSS para establecer el selector activo.
button:active {
background-color: green;
font-family: 'Courier New', Courier, monospace
}
Con estas líneas de código estamos cambiando el estilo del botón al enfocar.
- El color de fondo del botón cambiará a verde.
- Se cambiará la familia de fuentes.