EasyCode365EasyCode365

Dar estilo a formularios y botones

Los formularios permiten que las personas interactúen con un sitio web.

Pueden escribir un mensaje, suscribirse a un boletín, elegir una opción o enviar datos de contacto. Los formularios HTML básicos funcionan, pero los estilos predeterminados del navegador suelen verse diferentes según el dispositivo y el navegador.

CSS te ayuda a hacer que los formularios sean más claros, fáciles de revisar y cómodos de usar.

Recordatorio rápido: elementos de formulario

Antes de dar estilo a formularios, recuerda las etiquetas HTML comunes:

  • <form> envuelve todo el formulario.
  • <label> explica para qué sirve un campo.
  • <input> crea un campo para escribir, elegir o marcar algo.
  • <textarea> crea un campo de texto más grande y de varias líneas.
  • <button> crea una acción clicable.

Las etiquetas son especialmente importantes. El atributo for de un <label> debe coincidir con el id del input.

Solo lectura
<label for="email">Correo electrónico</label> <input id="email" type="email" />

Esta conexión ayuda a los lectores de pantalla y permite que el usuario haga clic en la etiqueta para enfocar el input.

También puedes conectar una etiqueta envolviendo el input dentro del label. Verás ese patrón más adelante con un checkbox.

Dar estilo a labels

Los labels deben ser fáciles de leer y estar cerca del campo que describen.

Por defecto, los labels son inline. Para formularios simples, suele ser más limpio colocar cada label encima de su campo con display: block.

Se puede editar
<label for="name">Nombre</label>
<input id="name" type="text" placeholder="Escribe tu nombre" />

<style>
  label {
    display: block;
    margin-bottom: 6px;
    font-family: Arial, sans-serif;
    font-weight: bold;
  }

  input {
    padding: 10px;
  }
</style>

Usa margin en el label o en el input para crear espacio entre filas del formulario.

Dar estilo a inputs de texto

Los inputs de texto normalmente necesitan estilos de ancho, padding, borde y fuente.

El padding hace que el texto escrito no se sienta apretado. Los bordes muestran la forma del campo. box-sizing: border-box mantiene el padding dentro del ancho que defines.

Se puede editar
<input class="text-field" type="text" placeholder="Nombre del curso" />

<style>
  .text-field {
    box-sizing: border-box;
    width: 100%;
    max-width: 320px;
    padding: 10px 12px;
    border: 1px solid #9ca3af;
    border-radius: 6px;
    font-family: Arial, sans-serif;
    font-size: 1rem;
  }
</style>

Usa rem para el tamaño del texto cuando sea posible, para que el campo pueda respetar la configuración de tamaño de fuente del navegador del visitante.

Dar estilo al texto placeholder

Un placeholder es el texto de ayuda dentro de un campo vacío.

Puedes darle estilo con el pseudo-elemento ::placeholder.

Solo lectura

No uses placeholders como el único label. Cuando el usuario escribe, el placeholder desaparece.

Dar estilo a estados de foco

Un campo tiene foco cuando el usuario hace clic en él o llega a él con la tecla Tab.

Los navegadores muestran un contorno de foco predeterminado para que el usuario sepa dónde está. Puedes mantenerlo o reemplazarlo por tu propio estilo de foco claro.

La pseudoclase :focus-visible suele ser útil para botones porque normalmente aparece con foco de teclado, no en cada clic del mouse.

Se puede editar
<input class="focus-field" type="email" placeholder="tu@ejemplo.com" />

<style>
  .focus-field {
    padding: 10px 12px;
    border: 1px solid #9ca3af;
    border-radius: 6px;
    font-family: Arial, sans-serif;
    font-size: 1rem;
  }

  .focus-field:focus {
    border-color: #2563eb;
    outline: 3px solid #bfdbfe;
  }
</style>

Esta regla cambia el borde y mantiene un contorno visible cuando el campo está activo.

Dar estilo a checkboxes

Los checkboxes son diferentes de los inputs de texto.

Los navegadores y sistemas operativos los dibujan a su manera, así que crear checkboxes totalmente personalizados es más avanzado. Para principiantes, mantén el checkbox nativo y mejora su espaciado.

También puedes usar accent-color para definir el color marcado en navegadores modernos.

Se puede editar
<label class="checkbox-row">
  <input type="checkbox" />
  Enviarme novedades de las lecciones
</label>

<style>
  .checkbox-row {
    display: flex;
    gap: 8px;
    align-items: center;
    font-family: Arial, sans-serif;
  }

  .checkbox-row input {
    accent-color: #2563eb;
  }
</style>

Esto mantiene el checkbox familiar y al mismo tiempo hace que encaje con tu diseño.

Dar estilo a botones

Los botones deben parecer clicables.

Los estilos comunes de botones incluyen padding, color de fondo, color del texto, borde, border radius y cursor.

Se puede editar
<button class="primary-button" type="button">Enviar mensaje</button>

<style>
  .primary-button {
    padding: 10px 16px;
    border: none;
    border-radius: 6px;
    background-color: #2563eb;
    color: white;
    font-family: Arial, sans-serif;
    font-size: 1rem;
    cursor: pointer;
  }

  .primary-button:hover {
    background-color: #1d4ed8;
  }
</style>

Usa :hover para la interacción con mouse. En formularios completos, añade también un estilo de foco visible para que los usuarios de teclado puedan ver qué botón está activo.

Botones deshabilitados

Un botón deshabilitado no se puede pulsar.

En HTML, añade el atributo disabled. En CSS, da estilo a :disabled para que el botón se vea claramente no disponible.

Se puede editar
<button class="save-button" type="button">Guardar</button>
<button class="save-button" type="button" disabled>Guardar</button>

<style>
  .save-button {
    padding: 10px 16px;
    border: none;
    border-radius: 6px;
    background-color: #16a34a;
    color: white;
    font-family: Arial, sans-serif;
    cursor: pointer;
  }

  .save-button:disabled {
    background-color: #d1d5db;
    color: #6b7280;
    cursor: not-allowed;
  }

  .save-button:focus-visible {
    outline: 3px solid #bbf7d0;
    outline-offset: 2px;
  }
</style>

No dependas solo del color. El cursor not-allowed y el texto más apagado también ayudan a comunicar el estado deshabilitado.

Estilos predeterminados del navegador

Los navegadores añaden estilos predeterminados a los formularios para que funcionen incluso sin CSS.

Estos estilos son útiles, pero pueden verse diferentes en Chrome, Safari, Firefox, macOS, Windows, Android e iOS. Definir tu propio espaciado, bordes, colores y fuentes hace que el formulario se sienta más consistente.

Evita eliminar todos los estilos predeterminados de una vez. Empieza con cambios pequeños y claros.

Ejemplo ejecutable: formulario de contacto con estilo

Este ejemplo combina labels, inputs de texto, un checkbox, estados de foco y botones.

Prueba hacer clic o navegar con Tab por los campos para ver el estilo de foco.

Se puede editar
<form class="contact-form">
  <label for="contact-name">Nombre</label>
  <input id="contact-name" type="text" placeholder="Escribe tu nombre" />

  <label for="contact-email">Correo electrónico</label>
  <input id="contact-email" type="email" placeholder="tu@ejemplo.com" />

  <label for="contact-message">Mensaje</label>
  <textarea id="contact-message" rows="4" placeholder="Escribe tu mensaje"></textarea>

  <label class="checkbox-row">
    <input type="checkbox" />
    Enviarme una copia
  </label>

  <div class="button-row">
    <button type="button">Enviar</button>
    <button type="button" disabled>Deshabilitado</button>
  </div>
</form>

<style>
  .contact-form {
    max-width: 360px;
    padding: 20px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background-color: #f9fafb;
    font-family: Arial, sans-serif;
  }

  .contact-form label {
    display: block;
    margin-bottom: 6px;
    font-weight: bold;
    color: #111827;
  }

  .contact-form input[type="text"],
  .contact-form input[type="email"],
  .contact-form textarea {
    box-sizing: border-box;
    width: 100%;
    margin-bottom: 14px;
    padding: 10px 12px;
    border: 1px solid #9ca3af;
    border-radius: 6px;
    font: inherit;
  }

  .contact-form input:focus,
  .contact-form textarea:focus {
    border-color: #2563eb;
    outline: 3px solid #bfdbfe;
  }

  .contact-form textarea {
    resize: vertical;
  }

  .contact-form .checkbox-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 16px;
    font-weight: normal;
  }

  .contact-form .checkbox-row input {
    accent-color: #2563eb;
  }

  .button-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }

  .button-row button {
    padding: 10px 16px;
    border: none;
    border-radius: 6px;
    background-color: #2563eb;
    color: white;
    font: inherit;
    cursor: pointer;
  }

  .button-row button:hover:not(:disabled) {
    background-color: #1d4ed8;
  }

  .button-row button:focus-visible {
    outline: 3px solid #bfdbfe;
    outline-offset: 2px;
  }

  .button-row button:disabled {
    background-color: #d1d5db;
    color: #6b7280;
    cursor: not-allowed;
  }
</style>

El formulario usa espaciado consistente, estados de foco visibles y estados de botón claros.

Errores comunes de principiantes

  • Quitar contornos de foco sin reemplazo: los usuarios de teclado necesitan ver qué campo está activo.
  • Olvidar conectar labels: usa valores for e id coincidentes, o envuelve el input dentro del label.
  • Usar placeholders en lugar de labels: los placeholders desaparecen cuando el usuario escribe.
  • Olvidar box-sizing: border-box: los inputs con width: 100% y padding pueden salirse de su contenedor.
  • Estilizar demasiado los checkboxes demasiado pronto: empieza con espaciado y accent-color antes de crear controles personalizados.

Mini tarea práctica

Mira esta regla CSS:

Solo lectura

¿Qué ayuda a prevenir box-sizing: border-box; en este input?

Revisa las respuestas del quiz cuando estés listo.

Quiz corto con respuestas

  1. ¿Qué atributo del label conecta un label con su input correspondiente?
  2. ¿Qué pseudo-clase da estilo a un campo cuando el usuario hace clic o llega a él con Tab?
  3. ¿Por qué deberías evitar usar placeholder text como el único label?

Respuestas:

  1. El atributo for.
  2. :focus.
  3. Porque el placeholder desaparece cuando el usuario empieza a escribir, y no es un buen reemplazo para un label real.

Respuesta de la mini tarea práctica: mantiene el padding dentro del ancho 100%, así que el input tiene menos probabilidad de salirse de su contenedor.

Pequeño desafío

Da estilo al formulario de comentarios de abajo.

Tus objetivos:

  • Haz que el <textarea> ocupe todo el ancho con 10px de padding.
  • Añade un estado :focus visible que cambie el color del borde del textarea.
  • Haz que el botón sea un bloque de ancho completo con fondo negro y texto blanco.
  • Añade un estado :hover que cambie el fondo del botón a gris oscuro.
  • Añade un estilo :focus-visible claro para el botón.
Se puede editar
<form class="challenge-form">
  <label for="message">Tu mensaje</label>
  <textarea id="message" rows="4" placeholder="Escribe tu mensaje"></textarea>

  <button class="action-button" type="button">Enviar mensaje</button>
</form>

<style>
  .challenge-form {
    max-width: 320px;
    font-family: Arial, sans-serif;
  }

  .challenge-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
  }

  #message {
    box-sizing: border-box;
    margin-bottom: 12px;
    border: 1px solid #9ca3af;
    border-radius: 6px;
    font: inherit;
    resize: vertical;
    /* Añade width y padding */
  }

  #message:focus {
    /* Añade un color de borde y un outline */
  }

  .action-button {
    /* Añade layout y colores del botón */
  }

  .action-button:hover {
    /* Añade color de fondo al hover */
  }

  .action-button:focus-visible {
    /* Añade un outline visible para foco de teclado */
  }
</style>

Resumen

  • Los formularios recopilan información del usuario.
  • Los labels explican los campos y deben conectarse con for e id.
  • Los inputs de texto suelen necesitar ancho, padding, borde, border radius y estilos de fuente.
  • El placeholder es una ayuda, no un reemplazo para un label.
  • Los estados de foco muestran qué campo está activo.
  • Para principiantes, es mejor mantener simples los checkboxes nativos.
  • Los botones deben tener estados claros: normal, hover, foco y deshabilitado.
  • Los estilos predeterminados del navegador son útiles, pero el CSS personalizado hace que los formularios sean más consistentes.