A structured lesson workspace with readable content, hands-on examples, and a clean path to completion.
<style>input, textarea { font:inherit; }</style><main class="demo"><label>Example field <input class="demo-input" type="text"/></label></main>
Engineering judgment: Use font: inherit deliberately, then rebuild the states that communicate field boundaries and focus.
In production, Form controls often ship with browser styling that differs from surrounding text. Reset only what you understand; preserving useful affordances is safer than flattening everything. That is the kind of bug that survives visual spot checks because the stylesheet is syntactically valid while the layout contract is wrong.
| Concern | What to inspect | Typical failure |
|---|---|---|
| Core behavior | Styling Text Inputs and Textareas | Form controls often ship with browser styling that differs from surrounding text. Reset only what you understand; preserving useful affordances is safer than flattening everything. |
| Production test | Real content and constraints | The rule works only for the demo values |
| Maintenance | Scope and override path | A later fix creates another exception |
The useful mental model here is practical: how form controls inherit typography, expose focus states, and handle placeholder, sizing, and long values. When a rule looks obvious but the browser produces something else, start by identifying which constraint or rendering phase is actually winning.
<style>textarea { min-height:8rem; resize:vertical; }</style><main class="demo"><label>Message <textarea rows="3">Example text</textarea></label></main>
A good CSS change narrows the problem. Use font: inherit deliberately, then rebuild the states that communicate field boundaries and focus. This keeps the rule understandable when content, theme, or viewport conditions change later.
<style>.demo { input::placeholder { color:#64748b; }; }</style><main class="demo">Example content</main>
Placeholder is useful here because it demonstrates styling text inputs and textareas under a concrete input rather than as an abstract property list.
<style>.demo { input:focus { border-color:#2563eb; box-shadow:0 0 0 3px rgb(37 99 235 / .18); }; }</style><main class="demo">Example content</main>
Focus ring is useful here because it demonstrates styling text inputs and textareas under a concrete input rather than as an abstract property list.
Finish the lesson once you have worked through the material. This awards ★ 30 XP.