Para un ejemplo vistoso que utiliza la pseudoclase :focus en CSS, crearemos un campo de formulario que, al enfocarse, no solo cambia visualmente de manera significativa, sino que también mejora la interactividad y la experiencia del usuario. Este ejemplo mostrará cómo un campo de texto puede transformarse y destacarse cuando el usuario se centra en él, ideal para formularios de contacto, búsquedas o registros.
En este ejemplo, cuando el campo de texto <input type="text"> recibe el foco, se activa un efecto que hace que el campo se «amplíe» ligeramente transform: scale(1.05); lo que atrae la atención del usuario hacia el área donde está escribiendo. Además, el color del borde cambia a un azul brillante border-color: #007bff; y se añade un ligero box-shadow alrededor del campo, lo que le da un efecto visualmente atractivo y destaca el elemento activo en la interfaz de usuario.
Este tipo de efecto es útil para guiar a los usuarios a través de formularios largos o complejos, ayudando a mantener el foco en el campo actual y mejorando la experiencia general del usuario. Puedes personalizar aún más los colores y efectos para que coincidan con la estética de tu sitio web.
HTML <div class="item"> <input class="fancy-focus" type="text" placeholder="Escribe algo..." /> </div>
CSS
.fancy-focus {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 2px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
transition: transform 0.3s ease, border-color 0.3s ease;
outline: none;
}
.fancy-focus:focus {
transform: scale(1.05);
border-color: #007bff;
box-shadow: 0 0 8px #007bff;
}