CSS 15: Estilizando Formularios

1. El Reto de los Formularios

Los inputs y botones tienen estilos muy marcados por el sistema operativo y navegador. Para lograr un diseño consistente, normalmente necesitamos "resetear" o sobrescribir propiedades como bordes, fondos y rellenos.

2. Estilos Básicos de Inputs

Lo primero es dar espacio y definir bordes claros. Propiedades clave:

• padding: Para dar aire interno.
• border: Define el borde (grosor, estilo, color).
• border-radius: Para bordes redondeados.
• width: 100%: Para que ocupen todo el contenedor (útil en móviles).
• box-sizing: border-box: Vital para que el padding no rompa el ancho.

input[type="text"], 
input[type="email"], 
textarea {
    width: 100%;
    padding: 10px; /* Aire interno */
    margin: 8px 0; /* Separación */
    border: 2px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box; /* Fundamental */
}

3. Estado Focus (Foco)

Es crucial indicar al usuario qué campo está activo. Usamos la pseudo-clase :focus. Nunca quites el outline sin poner otro estilo visible (accesibilidad).

input:focus {
    /* Quitamos el borde azul feo por defecto */
    outline: none; 
    /* Ponemos nuestro propio estilo */
    border-color: #3498db;
    box-shadow: 0 0 8px rgba(52, 152, 219, 0.3);
}

4. Botones Modernos

Los botones por defecto se ven antiguos. Con un poco de CSS podemos hacerlos parecer "Call to Action" (CTA).

button {
    background-color: #3498db; /* Color principal */
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 25px; /* Píldora */
    cursor: pointer; /* Manita */
    font-size: 16px;
    font-weight: bold;
    transition: transform 0.2s;
}

button:hover {
    background-color: #2980b9; /* Color más oscuro */
    transform: translateY(-2px); /* Pequeña elevación */
}

5. Etiquetas (Labels) y Diseño

Para maquetar, solemos usar display: block en los labels para que se pongan encima del input, o Flexbox/Grid para diseños más complejos.

label {
    display: block; /* Ocupa toda la línea */
    margin-bottom: 5px;
    font-weight: bold;
    color: #333;
}

6. Otros Estados (Interactividad)

Un formulario debe "reaccionar". No olvides estos estados:

• :disabled: Los campos deshabilitados deben verse claramente diferentes (gris, cursor not-allowed).
• :invalid: Estilos para cuando el navegador detecta error (ej: email mal escrito).

/* Estilo para campos inválidos mientras se escribe */
input:invalid:not(:placeholder-shown) {
    border-color: #e74c3c; /* Rojo error */
    background-color: #fceceb;
}

input:disabled {
    background-color: #f0f0f0;
    cursor: not-allowed;
    color: #888;
}

7. Estilizando Checkboxes y Radios

Por defecto son difíciles de estilizar. El truco profesional es ocultar el input original (con appearance: none o hacks de opacidad) y crear el estilo visual con CSS personalizado.

/* Ejemplo rápido: Radio Button Personalizado */
input[type="radio"] {
  appearance: none; /* Elimina el estilo del sistema */
  width: 20px;
  height: 20px;
  border: 2px solid #4A90E2;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
}

/* El punto interno cuando está seleccionado */
input[type="radio"]:checked::before {
  content: "";
  width: 10px;
  height: 10px;
  background: #4A90E2;
  border-radius: 50%;
  position: absolute;
  top: 50%; 
  left: 50%;
  transform: translate(-50%, -50%);
}

8. Organización Visual Avanzada (Grid)

Para formularios complejos, olvida los floats o márgenes manuales. CSS Grid es la mejor herramienta.

.form-container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Dos columnas iguales */
  gap: 20px; /* Espacio entre campos */
}

.full-width {
  grid-column: span 2; /* Campo que ocupa ambas columnas (ej: textarea) */
}

9. Errores Comunes (Red Flags) 🚩

• Eliminar el outline sin reemplazo: Nunca hagas outline: none sin poner un box-shadow o border alternativo visible para el foco.
• Placeholders como etiquetas: El placeholder desaparece al escribir. ¡Usa siempre <label>!
• Botones sin cursor: Los botones siempre deben tener cursor: pointer.
• No agrupar: El label debe estar visualmente pegado a su input.

10. Formulario Multipasos con Barra de Progreso (Solo CSS)

Usando el mismo truco de radio buttons y el selector :checked, podemos crear un formulario de varios pasos con una barra de progreso visual, sin JavaScript.

Ejemplo Interactivo

Completa cada paso y usa los botones para navegar. Observa cómo la barra de progreso avanza.

Código HTML

<form class="form-multipasos">
    <!-- Radio buttons de control (ocultos con CSS) -->
    <input type="radio" name="paso" id="paso1" checked>
    <input type="radio" name="paso" id="paso2">
    <input type="radio" name="paso" id="paso3">

    <!-- Barra de progreso -->
    <div class="barra-progreso">
        <div class="paso-indicador indicador-1">1</div>
        <div class="paso-indicador indicador-2">2</div>
        <div class="paso-indicador indicador-3">3</div>
    </div>

    <!-- Contenedor de pasos -->
    <div class="contenedor-pasos">
        <div class="paso-contenido paso-1">
            <h3>Paso 1: Datos Personales</h3>
            <!-- Campos del paso 1 -->
            <label for="paso2" class="btn-siguiente">Siguiente</label>
        </div>

        <div class="paso-contenido paso-2">
            <h3>Paso 2: Preferencias</h3>
            <!-- Campos del paso 2 -->
            <label for="paso1" class="btn-anterior">Anterior</label>
            <label for="paso3" class="btn-siguiente">Siguiente</label>
        </div>

        <div class="paso-contenido paso-3">
            <h3>Paso 3: Confirmación</h3>
            <label for="paso2" class="btn-anterior">Anterior</label>
            <button type="submit">Enviar</button>
        </div>
    </div>
</form>

Código CSS (Clave)

/* Ocultar los radio buttons */
input[name="paso"] { display: none; }

/* Ocultar todos los pasos por defecto */
.paso-contenido { display: none; }

/* Mostrar paso según qué radio está seleccionado */
#paso1:checked ~ .contenedor-pasos .paso-1 { display: block; }
#paso2:checked ~ .contenedor-pasos .paso-2 { display: block; }
#paso3:checked ~ .contenedor-pasos .paso-3 { display: block; }

/* === BARRA DE PROGRESO === */
.barra-progreso::after {
    content: "";
    position: absolute;
    height: 4px;
    background: #667eea;
    transition: width 0.4s ease;
    width: 0%;
}

/* Actualizar ancho según el paso activo */
#paso1:checked ~ .barra-progreso::after { width: 0%; }
#paso2:checked ~ .barra-progreso::after { width: 50%; }
#paso3:checked ~ .barra-progreso::after { width: 100%; }

/* Activar indicadores de paso */
#paso1:checked ~ .barra-progreso .indicador-1,
#paso2:checked ~ .barra-progreso .indicador-1,
#paso2:checked ~ .barra-progreso .indicador-2,
#paso3:checked ~ .barra-progreso .indicador-1,
#paso3:checked ~ .barra-progreso .indicador-2,
#paso3:checked ~ .barra-progreso .indicador-3 {
    background: #667eea;
    color: white;
}

¿Cómo Funciona?

• Radio buttons ocultos: Cada uno representa un paso. Solo uno puede estar activo a la vez.
• Labels como botones: Los botones "Siguiente" y "Anterior" son <label> que apuntan al radio del paso correspondiente.
• Selector ~: Permite seleccionar elementos hermanos posteriores al radio marcado para mostrar/ocultar contenido.
• Barra de progreso: Usa ::after con ancho variable según el paso activo.

🎮 Practica lo Aprendido: Diseñador de Formularios de Blackchorima

Usa el Diseñador de Formularios de Blackchorima para aplicar todos los conceptos de estilización de formularios que has aprendido. La herramienta te permite:

• ✅ Experimentar con colores, bordes y espaciados en tiempo real
• ✅ Ver el efecto :focus y otros estados interactivos
• ✅ Practicar layouts con Grid y Flexbox
• ✅ Exportar el código CSS generado para tus proyectos
• ✅ Probar diferentes estilos sin tocar código manualmente