Estilizar formularios en CSS es uno de los trabajos más comunes y, a la vez, donde es más fácil cometer errores de diseño. Por defecto, los navegadores aplican estilos muy diferentes y anticuados a los inputs.
Para lograr un formulario moderno, limpio y con una gran experiencia de usuario, necesitas dominar tres aspectos: resetear los estilos nativos, darles suficiente espacio (padding) y manejar los estados visuales (focus).
Mediante la seudo-clase focus se puede resaltar el elemento que tiene el foco.
input:focus {
border: 2px solid #000;
background: #F3F3F3;
}
En los elementos INPUT del tipo TEXT y TEXAREA el texto esta muy pegado al borde.
input[type:text],
textarea {
padding: 2px;
}
El elemento LABEL es un elemento en linea, por lo que no ocupa todo el ancho ni causa un salto de linea.
label{
display: block;
margin: 3px 0;
}
Define el alineamiento vertical de los elementos en las celdas. Su uso es basicamente sobre etiquetas in-line y no funcionan sobre etiquetas del tipo bloque como P, DIV, etc.
| Valor | Descripcion |
|---|---|
| baseline | Alinea la línea base del elemento con la línea base del padre. Su comportamiento puede cambiar en un navegador u otro. Valor por defecto. |
| sub | Alinea la línea base del elemento con la línea SUB del elemento padre. |
| super | Alinea la línea base del elemento con la línea SUP del elemento padre. |
| text-top | La parte superior del elemento es alineada con la parte superior del elemento padre. |
| text-bottom | La parte inferior del elemento es alineada con la parte inferior del elemento padre. |
| middle | Se ubica a la mitad del elemento padre. |
| top | La parte superior del elemento es alineado con la parte superior del elemento en la misma línea. |
| bottom | |
| absoluto(px,em) | Medida absoluta respecto a la linea base del padre. Valores negativos estan permitidos. |
| relativo (%) | Medida relativa respecto a la linea base del padre. |
| inherit | Hereda del padre |
| unset | No usado |
vertical-align: bottom; vertical-align: middle;
La etiqueta FIELDSET es posible aprovecharla como un campo contenedeor de dos o mas columnas.
form fieldset{
float: left;
width: 48%;
}
Un buen botón debe reaccionar cuando el usuario pasa el cursor por encima (:hover) o cuando hace clic (:active).
.mi-formulario button[type='submit'] {
width: 100%;
padding: 12px;
background-color: #007bff;
color: white;
border: none;
border-radius: 6px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
transition: background-color 0.2s ease;
}
/* Al pasar el cursor */
.mi-formulario button[type='submit']:hover {
background-color: #0056b3;
}
/* Al hacer clic */
.mi-formulario button[type='submit']:active {
transform: scale(0.98); /* Pequeño efecto de hundimiento */
}
.btn-primario {
/* 1. Resetear estilos nativos */
background: #007bff;
color: #ffffff;
border: none;
font-family: inherit; /* Hereda la tipografía de la página */
/* 2. Dimensiones y Espaciado */
padding: 12px 24px;
font-size: 16px;
font-weight: 600;
border-radius: 6px;
/* 3. Interactividad */
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
/* 4. Transición suave para los estados */
transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
}
/* Estado HOVER: Cuando el cursor pasa por encima */
.btn-primario:hover {
background-color: #0056b3; /* Un tono más oscuro */
}
/* Estado ACTIVE: En el milisegundo exacto en que se hace clic */
.btn-primario:active {
transform: scale(0.97); /* Efecto físico de "hundimiento" */
}
/* Estado FOCUS: Cuando se navega con el teclado (Accesibilidad) */
.btn-primario:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(0,123,255,0.4); /* Brillo exterior */
}
.btn-secundario {
color: #007bff;
background: transparent;
border: 2px solid #007bff;
/* Comparte el mismo padding y transiciones que el primario */
}
.btn-secundario:hover {
color: white;
background: #007bff;
}
.btn-pildora {
border-radius: 50px; /* Un radio alto los hace completamente redondeados */
}
.btn-primario:disabled {
background-color: #cccccc;
color: #666666;
cursor: not-allowed; /* Cambia el cursor a un símbolo de prohibido */
transform: none; /* Evita que se mueva al hacer clic */
}