Styling forms
The browser draws fields and buttons its own way, and they look slightly different in different browsers. With CSS, forms are brought to the site's own style. The main thing is not to lose the hints the user needs: where the focus is, which field is disabled, where the error is.
Input fields
Fields get padding, a border and rounded corners. An important detail: fields do not inherit the page font, so they get font: inherit:
<style>
.field {
display: block;
width: 100%;
box-sizing: border-box;
padding: 8px 10px;
margin-bottom: 8px;
font: inherit;
border: 1px solid silver;
border-radius: 6px;
}
</style>
<input class="field" placeholder="Name">
<textarea class="field" rows="3" placeholder="Message"></textarea>box-sizing: border-box from the box model lesson keeps a field with width: 100% from sticking out past the edge because of its padding and border.
Buttons
A button usually loses its default border and gets a background and a pointing-hand cursor. The :hover and :active states show that the button responds to actions:
<style>
.btn { padding: 8px 16px; border: none; border-radius: 6px; background: steelblue; color: white; font: inherit; cursor: pointer; }
.btn:hover { background: royalblue; }
.btn:active { background: navy; }
</style>
<button class="btn">Send</button>Focus
A field or button in focus is the element that currently receives keyboard input. The :focus-visible pseudo-class matches when the focus is important to show, for example when moving with the Tab key:
<style>
input { padding: 6px 8px; border: 1px solid silver; border-radius: 6px; }
input:focus-visible { outline: 3px solid lightskyblue; outline-offset: 1px; border-color: steelblue; }
</style>
<input placeholder="Click here or press Tab">Placeholder, disabled fields and errors
::placeholder styles the hint text, :disabled a disabled field, and :user-invalid a field with an error after the user has filled it in:
<style>
input { display: block; margin-bottom: 8px; padding: 6px 8px; border: 1px solid silver; border-radius: 6px; }
input::placeholder { color: slategray; font-style: italic; }
input:disabled { background: whitesmoke; cursor: not-allowed; }
input:user-invalid { border-color: crimson; background: mistyrose; }
</style>
<input type="email" placeholder="Type an email and leave the field">
<input placeholder="This field is disabled" disabled>Type a word without @ into the first field and click elsewhere — the field turns red.
Checkbox color: accent-color
Checkboxes, radio buttons and sliders are hard to recolor with regular properties. A single property, accent-color, changes their brand color:
<style>
form { accent-color: seagreen; }
</style>
<form>
<label><input type="checkbox" checked> Checkbox</label>
<label><input type="radio" checked> Radio button</label>
<input type="range">
</form>A custom checkbox: appearance: none
appearance: none turns off the default look of an element, and it can be drawn again like a regular block. This is how checkboxes in the site's style are made:
<style>
.check {
appearance: none;
width: 20px;
height: 20px;
border: 2px solid seagreen;
border-radius: 4px;
vertical-align: middle;
cursor: pointer;
}
.check:checked { background: seagreen; box-shadow: inset 0 0 0 3px white; }
</style>
<label><input type="checkbox" class="check"> Remember me</label>Click the checkbox: when ticked, it fills with color. In the same way a <select> loses its default arrow and gets its own one as a background image.
Common mistake
outline: none without a replacement. The focus ring gets removed because it looks "ugly", and a person using the keyboard no longer sees where they are. Move through the fields with the Tab key:
<style>
input { display: block; margin-bottom: 8px; padding: 6px 8px; }
.bad:focus { outline: none; }
.good:focus-visible { outline: 3px solid gold; }
</style>
<input class="bad" placeholder="Focus is invisible">
<input class="good" placeholder="Focus is visible">If the default ring does not suit you, replace it with your own, but never remove it completely.