El Selector de pseudoclase :focus CSS se utiliza para apuntar al elemento enfocado, es decir, selecciona un elemento que actualmente está enfocado por el usuario. Este selector funciona en los elementos de entrada del usuario, generalmente utilizados en formularios, y se activa tan pronto como el usuario hace clic en él o toca un elemento, o selecciona cualquier evento del teclado.
Sintaxis:
:focus {
// CSS property
}
Ejemplo: Este ejemplo ilustra el selector :focus para apuntar al elemento seleccionado.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
input:focus {
background-color: limegreen;
}
</style>
</head>
<body>
<h3>Fill this form</h3>
<form> Full name:
<input type="text"
placeholder="Enter Name"
name="name">
<br> User Id:
<input type="text"
placeholder="Enter Username"
name="uid">
<br> Password:
<input type="password"
placeholder="Enter Password"
name="pass">
<br>
<button type="button"
onclick="#">Sign Up</button>
</form>
</body>
</html>
Producción:
Navegadores compatibles:
- Google Chrome 4.0
- Microsoft Edge 12.0
- Internet Explorer 8.0
- Firefox 2.0
- Safari 3.1
- Ópera 9.6
Publicación traducida automáticamente
Artículo escrito por Vishal_Khoda y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA