Plantilla CSS para campos de entrada: decoraciones con border-radius y padding
📝 Uso
Esta plantilla se utiliza para agregar border-radius y padding a un campo de entrada.
📘 Explicación
Este código usa `border-radius` para redondear las esquinas del campo de entrada y `padding` para ajustar el espacio interno. La regla `input:focus` cambia el color del borde cuando el campo de entrada recibe el foco.
El contorno se muestra fuera del elemento. A diferencia del borde, no afecta al tamaño del elemento.
Rango de impacto: El contorno se usa principalmente para efectos visuales. Incluso cuando se muestra el contorno, el espacio circundante del elemento no cambia.
Métodos de ajuste: El contorno se puede configurar usando outline-width, outline-color, outline-style, etc.
input:focus {
outline-color: #3498db; /* Cambiar el color del contorno cuando tiene el foco */
outline: none; /* Eliminar el contorno */
}
Además,
También puedes cambiar el outline-color usando input:focus.
🔹 Código Parcial
<style>
/* Decoración del campo de entrada */
input {
border-radius: 8px; /* Esquinas redondeadas */
padding: 10px 15px; /* Relleno interno */
font-size: 16px; /* Tamaño de la fuente */
border: 2px solid #ccc; /* Borde */
transition: all 0.3s ease;
}
/* Estilos para el campo de entrada enfocado */
input:focus {
border-color: #3498db; /* Color del borde al enfocar */
outline: none; /* Eliminar el contorno al enfocar */
}
</style>
💻 Código Completo
<input type="text" placeholder="Ingresa tu nombre" />
<style>
/* Decoración del campo de entrada */
input {
border-radius: 8px; /* Esquinas redondeadas */
padding: 10px 15px; /* Relleno interno */
font-size: 16px; /* Tamaño de la fuente */
border: 2px solid #ccc; /* Borde */
transition: all 0.3s ease;
}
/* Estilos para el campo de entrada enfocado */
input:focus {
border-color: #3498db; /* Color del borde al enfocar */
outline: none; /* Eliminar el contorno al enfocar */
}
</style>
🎨 Técnicas prácticas para el diseño de campos de entrada
El estilo de los campos de entrada es un elemento crucial que impacta directamente en la experiencia del usuario. Combinando adecuadamente border-radius y padding, puedes crear formularios fáciles de usar y visualmente atractivos.
📏 Puntos clave para un tamaño óptimo
padding: 10px 15px es un tamaño estándar, pero en dispositivos móviles, aumentar a padding: 12px 16px facilita la interacción táctil. Los valores adecuados para border-radius varían entre 4px y 12px, y deben ajustarse para adaptarse al estilo de diseño del sitio.
🌈 Variaciones en el diseño de color
El border-color en foco puede cambiarse para coincidir con el tema de colores del sitio, como #3498db (azul), #4CAF50 (verde) o #FF7043 (naranja). Para soporte en modo oscuro, usa @media (prefers-color-scheme: dark) para especificar un color de borde más claro.
✨ Mejora de la interacción
Agregar box-shadow a la propiedad transition y establecer box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.3) en input:focus proporciona un efecto de foco más destacado. Sin embargo, es importante mantener las animaciones sutiles.
El diseño de los campos de entrada debe priorizar la funcionalidad y al mismo tiempo armonizar con el sistema de diseño general del sitio. Especialmente en páginas con formularios largos, mantener estilos consistentes mejora la usabilidad.