Styling forms
Style forms using CSS, while ensuring they remain usable and readable for everyone.
Help users use your form with their preferred browser #
To ensure that your form is accessible to as many people as possible, use the elements built for the job: <input>
, <textarea>
, <select>
, and <button>
. This is the baseline for a usable form.
The default browser styles don't look great! Let's change that.
Ensure form controls are readable for everyone #
The default font size for form controls in most browsers is too small. To ensure your form controls are readable, change the font size with CSS:
Increase the font-size
and line-height
to improve readability.
.form-element {
font-size: 1.3rem;
line-height: 1.2;
}
Help users navigate through your form #
As a next step, change the layout of your form, and increase the spacing of form elements, to help users understand which elements belong together.
The margin
CSS property increases space between elements, and the padding
property increases space around the element's content.
For the general layout, use Flexbox or Grid. Learn more about CSS layout methods.
Ensure form controls look like form controls #
Make it easy for people to fill out your form by using well-understood styles for your form controls. For example, style <input>
elements with a solid border.
input,
textarea {
border: 1px solid;
}
Help users submit your form #
Consider using a background
for your <button>
to match your site style, and override or remove the default border
styles.
Help users understand the current state #
Browsers apply a default style for :focus
. You can override the styles for :focus
to match the color to your brand.
button:focus {
outline: 4px solid green;
}
Why should you use relative units for font-size
?
🎉
Try again!
Try again!
Try again!
How can you increase spacing between form controls?
Using thepadding
CSS property. Using the spacer
CSS property. Using the margin
CSS property. Using the boundary
CSS property. Try again!
Try again!
🎉
Try again!