Cargando...

Controles de formulario en CSS

Los formularios son donde la gente escribe, elige y envía. CSS puede hacer input, textarea y select más claros y calmados — padding legible, bordes ordenados y una pista de foco que sí se ve — mientras HTML mantiene la semántica.

Un kit de controles de formulario

📊 Controles de formulario de un vistazo

Pieza Trabajo cotidiano
input / textarea / select Los controles principales que estilizas juntos
padding + border Dar espacio y un borde claro a los campos
border-radius Suavizar esquinas
:focus-visible Mostrar anillo de foco para teclado/puntero
:disabled Atenuar campos que no se pueden editar ahora

Estiliza una clase compartida (o grupo de elementos) una vez para que cada campo parezca de la misma familia. La piel de los botones espera a la siguiente lección.

Inputs de texto — espacio y bordes

Los inputs por defecto suelen verse desiguales entre dispositivos. Define ancho, padding, tamaño de fuente y un borde ligero para que escribir sea cómodo.

Input de texto base

css
CSS Code 
input[type="text"],
input[type="email"],
input[type="password"] {
width: 100%;
max-width: 24rem;
padding: 0.6rem 0.75rem;
font: inherit;
border: 1px solid #c5c5c5;
border-radius: 0.375rem;
background: #fff;
}

Textarea — espacio para escribir

Las textareas necesitan altura y el mismo lenguaje de padding que los inputs. Permite resize vertical si esperas respuestas largas; bloquéalo si el layout debe quedarse fijo.

Textarea cómoda

css
CSS Code 
textarea {
width: 100%;
max-width: 24rem;
min-height: 7rem;
padding: 0.6rem 0.75rem;
font: inherit;
border: 1px solid #c5c5c5;
border-radius: 0.375rem;
resize: vertical;
}

Select — misma familia

Los desplegables deben compartir borde, radio y padding con los campos de texto para que el formulario no parezca remendado.

Select en la misma familia

css
CSS Code 
select {
width: 100%;
max-width: 24rem;
padding: 0.6rem 0.75rem;
font: inherit;
border: 1px solid #c5c5c5;
border-radius: 0.375rem;
background: #fff;
}

Foco que se ve

Nunca quites estilos de foco sin reemplazo. :focus-visible dibuja un anillo claro para teclado y mantiene el aspecto calmado.

Anillo de foco visible

css
CSS Code 
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
outline: 2px solid #0b5fff;
outline-offset: 2px;
border-color: #0b5fff;
}

Campos deshabilitados

Los controles disabled deben verse no disponibles — menos opacidad o fondo apagado — sin desaparecer del layout.

Tono disabled

css
CSS Code 
input:disabled,
textarea:disabled,
select:disabled {
opacity: 0.6;
background: #f3f3f3;
cursor: not-allowed;
}

Un hábito calmado de campos

Mantén un estilo de campo compartido, respeta el espacio de la etiqueta, conserva el foco y deja el aspecto del botón para la lección Buttons.

Clase de campo compartida

css
CSS Code 
.field {
display: block;
width: 100%;
max-width: 24rem;
padding: 0.6rem 0.75rem;
font: inherit;
border: 1px solid #c5c5c5;
border-radius: 0.375rem;
}

.field:focus-visible {
outline: 2px solid #0b5fff;
outline-offset: 2px;
}

Pruébalo tú

  1. Estiliza inputs texto/email con padding, border y border-radius.
  2. Iguala un textarea; pon resize: vertical.
  3. Estiliza un select con la misma familia de borde.
  4. Añade outline :focus-visible + color de borde — no dejes outline: none solo.
  5. Atenúa un input :disabled y comprueba que sigue leyéndose como campo.

Errores comunes

  • outline: none sin reemplazo de foco (usuarios de teclado se pierden)
  • Padding/fuente diminutos que hacen doloroso escribir en móvil
  • Estilizar cada control distinto para que el formulario parezca aleatorio
  • Convertir esta lección en diseño de botones (eso es lo siguiente)
  • Mezclar con border-collapse / zebra de tablas (sesión anterior)

Resumen

  • Padding, borde y radio compartidos unifican inputs, textareas y selects
  • Da altura y resize sensato a las textareas
  • Mantén una pista :focus-visible visible
  • Atenúa campos :disabled; no los ocultes
  • Deja la cosmética de botones para la siguiente lección

🧠 Pon a Prueba tu Conocimiento

Listo para Empezar

Pon a Prueba tu Conocimiento

Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema

❓
7
Preguntas
🎯
70%
Para Aprobar
♾️
∞
Tiempo
🔄
∞
Intentos

📝 Instrucciones

  • Lee cada pregunta cuidadosamente
  • Selecciona la mejor respuesta para cada pregunta
  • Puedes repetir el quiz tantas veces como quieras
  • Tu progreso se mostrará en la parte superior
Tema 33 de 35
Css Tutorial