A text box is a form control for entering user data. In HTML, text and email inputs provide single-line fields, while a textarea provides a larger text area; each control’s behavior and appearance depend on its type, attributes, and CSS. section 10.3 section 10.3.2
Style text boxes by grouping similar controls and preserving a consistent interface:
- Select text-like inputs without adding maintenance-heavy classes by using input:not([type="radio"], [type="checkbox"]). section 10.3.1
- Set readable typography explicitly because inputs do not inherit font styles by default; use 1rem, inherit for the font family, and inherit for color. section 10.3.1
- Create a themed appearance with padding, a custom bottom border, a gradient border image, rounded corners, and full available width. section 10.3.1
- Reuse the same rule for select and textarea elements instead of duplicating declarations, then restrict textarea resizing to vertical when horizontal resizing disrupts the layout. section 10.3.2
- Use an attribute selector such as input[type="number"] { text-align: right } when numeric values should align consistently across screen sizes. section 8.4.3
Contact form
A contact form can combine a name text input, an email input, radio buttons, a checkbox, a textarea, labels, error messages, and a Send button. Apply shared styles to the text-like controls while treating radio buttons and checkboxes separately. section 10.1 section 10.3
Listing 10.4 Styling input fields that aren’t of type radio or checkbox
input:not([type="radio"], [type="checkbox"]) {
font-size: 1rem;
font-family: inherit;
color: inherit;
border: none; #1
border-bottom: solid 1px var(--primary); #2
border-image: linear-gradient(to right, var(--primary), var(--accent)) 1; #3
padding: 0 0 .25rem;
width: 100%;
}
Inspect the complete selector and declarations used to style text and email inputs without affecting radio buttons or checkboxes. section 10.3.1
Inspect the one-line resize rule that keeps a textarea vertically adjustable while preventing horizontal layout problems. section 10.3.2
