HTML & CSS · Forms & Inputs · Lesson 23 of 25
Styling Forms with CSS
Concept
Styling Forms with CSS
Inputs are just elements, so normal CSS applies — padding, border, and border-radius turn a plain input into something that matches the rest of your design.
Browsers apply their own default styling to form elements, which varies between browsers — that's why real projects almost always reset and restyle inputs and buttons explicitly.
By the end of this lesson
- Explain the core idea behind Styling Forms with CSS.
- Predict output before running a change.
- Test one realistic and one unusual input.
- Use the result to make the next decision.
How to study this page
- 1. Read one concept.
- 2. Change the example.
- 3. Run, compare, and explain.
- 4. Complete the challenge below.
Syntax
input:focus {
outline: none;
border-color: accent-color;
}ExampleRunnable
input, button {
padding: 10px 14px;
border-radius: 8px;
border: 1px solid #ccc;
font-size: 14px;
}
input:focus {
outline: none;
border-color: #04aa6d;
}A visible focus ring for accessibility
input:focus {
box-shadow: 0 0 0 3px rgba(4, 170, 109, 0.3);
}Note: Removing outline without adding a replacement focus style hurts keyboard users, who rely on that visual cue to know which field they're in.
Self-check before continuing
Without looking at the example, describe what changes when you modify one input in Styling Forms with CSS. Then reopen the editor and prove your explanation with a small test.
You are ready to continue when you can predict, test, and explain the result.
Your turn
Style a form's inputs and button with consistent padding and rounded corners, and add a focus style.
Loading editor…
Console