Cómo dar estilo a los formularios

Ayuda a los usuarios a usar tu formulario con su navegador preferido

Para asegurarte de que el formulario sea accesible para la mayor cantidad posible de personas, usa los elementos compilados para el trabajo: <input>, <textarea>, <select> y <button>. Este es el modelo de referencia de una forma utilizable.

Los estilos predeterminados del navegador no se ven muy bien. Cambiemos eso.

Asegúrate de que los controles del formulario sean legibles para todos

El tamaño de fuente predeterminado para los controles de formularios en la mayoría de los navegadores es demasiado pequeño. Para asegurarte de que los controles de los formularios sean legibles, cambia el tamaño de fuente con CSS:

Aumenta los font-size y line-height para mejorar la legibilidad.

.form-element {
  font-size: 1.3rem;
  line-height: 1.2;
}

Ayuda a los usuarios a navegar por tu formulario

Como siguiente paso, cambia el diseño del formulario y aumenta el espaciado de sus elementos para ayudar a los usuarios a comprender qué elementos deben estar juntos.

La propiedad de CSS margin aumenta el espacio entre los elementos, mientras que la propiedad padding lo hace alrededor del contenido del elemento.

Para el diseño general, usa Flexbox o Grid. Obtén más información sobre los métodos de diseño CSS.

Cómo asegurarse de que los controles de formularios sean similares a los controles de formularios

Usa estilos bien comprendidos para los controles de formularios para que las personas puedan completar tu formulario con facilidad. Por ejemplo, define el estilo de los elementos <input> con un borde sólido.

input,
textarea {
  border: 1px solid;
}

Ayuda a los usuarios a enviar tu formulario

Te recomendamos que uses una background para que tu <button> coincida con el estilo de tu sitio y que anules o quites los diseños border predeterminados.

Ayuda a los usuarios a comprender el estado actual

Los navegadores aplican un estilo predeterminado para :focus. Puedes anular los estilos de :focus para que el color coincida con tu marca.

button:focus {
    outline: 4px solid green;
}

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre estilos de formularios

Recursos

• Aprender CSS
• Métodos de diseño CSS
• Cómo diseñar indicadores de enfoque
• Revierte el diseño predeterminado de un elemento <button>.