CSS Styling Forms
CSS can improve the appearance, spacing, readability, and interactive feedback of HTML forms and their controls.
Form elements such as labels, text fields, textareas, select menus, checkboxes, and radio buttons can be styled to fit the visual design of a website. CSS pseudo-classes can also provide visible feedback when controls receive focus or enter different validation states.
Styling Form Labels
Labels identify the purpose of form controls and can be styled with the same typography and spacing properties used for other text.
label {
display: block;
margin-bottom: 6px;
font-weight: bold;
}Using display: block places the label on its own line, while the bottom margin creates space between the label and its associated control.
CSS styling should not replace the semantic connection between a <label> and its form control. Use the HTML for attribute with a matching control id when appropriate.
Styling Input Fields
Many text-based <input> controls can be styled with borders, backgrounds, padding, font properties, and sizing.
input[type="text"],
input[type="email"] {
padding: 10px;
border: 1px solid #999;
border-radius: 4px;
font: inherit;
}Attribute selectors are useful when a style should apply only to particular types of input controls instead of every <input> element.
The font: inherit declaration allows the control to use the surrounding document's inherited font settings instead of relying on browser-specific form-control defaults.
Styling Textareas
A <textarea> can use many of the same styles as a text input.
textarea {
width: 100%;
padding: 10px;
border: 1px solid #999;
border-radius: 4px;
font: inherit;
}The resize property can control whether and how the user can resize a textarea.
textarea {
resize: vertical;
}The vertical value allows the textarea to be resized vertically without allowing its width to disrupt the surrounding layout.
Styling Select Menus
The <select> element can be styled with properties such as width, padding, border, background color, and font.
select {
width: 100%;
padding: 10px;
border: 1px solid #999;
border-radius: 4px;
background-color: white;
font: inherit;
}The appearance of native form controls can vary between browsers and operating systems. Some parts of a native select menu remain controlled by the browser or operating system rather than ordinary CSS.
Form Control Sizing
Form controls are often given a width of 100% so they use the available width of their container.
input[type="text"],
input[type="email"],
select,
textarea {
width: 100%;
box-sizing: border-box;
}Using box-sizing: border-box makes the declared width include the control's padding and border. This helps prevent a 100% wide control from extending beyond its container.
Controls do not always need to fill their container. Width should be chosen to suit the type of information the user is expected to enter.
Form Focus States
A form control receives focus when a user selects it with a keyboard, mouse, touch interaction, or another input method. A clearly visible focus state helps users identify the active control.
input:focus,
select:focus,
textarea:focus {
border-color: #0088cc;
outline: 2px solid #0088cc;
outline-offset: 2px;
}A border-color change can supplement the focus indicator, but it should not be the only indication when the difference is difficult to see.
Avoid removing the browser's focus outline unless another clearly visible focus indicator is provided.
Form Validation States
CSS pseudo-classes can style controls according to their HTML constraint-validation state.
input:valid {
border-color: green;
}
input:invalid {
border-color: darkred;
}The :valid pseudo-class selects a control whose value satisfies its validation constraints, while :invalid selects one whose value does not.
For example, an email field with required can be invalid when it is empty or when its value does not match the expected email-address format.
Color alone should not be the only way validation information is communicated. Form instructions and error messages should also clearly explain what needs to be corrected.
Disabled Form Controls
The :disabled pseudo-class can style form controls that have the HTML disabled attribute.
input:disabled {
color: #666;
background-color: #eee;
cursor: not-allowed;
}Disabled controls are not available for normal user interaction. Their styling should make that state visually understandable while maintaining readable text and sufficient contrast.
Checkboxes and Radio Buttons
The accent-color property provides a simple way to change the accent color used by supported form controls such as checkboxes and radio buttons.
input[type="checkbox"],
input[type="radio"] {
accent-color: #0088cc;
}This allows the browser to retain the familiar native control while incorporating a chosen accent color.
The :checked pseudo-class can select a checkbox or radio button when it is selected.
input[type="checkbox"]:checked {
accent-color: darkgreen;
}Form Spacing and Layout
Grouping each label and control in a container makes consistent vertical spacing easier to manage.
.form-group {
margin-bottom: 18px;
}For more complex forms, CSS Grid or Flexbox can arrange related fields into rows and columns. The layout should remain understandable when the available width becomes smaller.
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}A responsive layout can change the number of columns at smaller viewport widths when necessary.
Styling Forms Example
The following example demonstrates labels, text and email fields, a select menu, a textarea, a checkbox, and visible focus styling. Open the example in the editor and change the borders, padding, colors, spacing, or focus styles to see how each change affects the form.
input[type="text"],
input[type="email"],
select,
textarea {
width: 100%;
padding: 10px;
border: 1px solid #999;
border-radius: 4px;
box-sizing: border-box;
font: inherit;
}
input:focus,
select:focus,
textarea:focus {
border-color: #0088cc;
outline: 2px solid #0088cc;
outline-offset: 2px;
}