Campo de formulario con CSS :focus

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.

CSS

.item {
  width: 90%;
  margin: 5vh 5%;
}

.fancy-focus {
  width: 80%;
  padding: 10px;
  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;
  margin: 0 5%;
}

HTML

<div class="item"> 
  <input 
    class="fancy-focus" 
    type="text" 
    placeholder="Escribe algo..." 
  /> 
</div>