Other Form Elements — Code Challenge
Put respect native form control behaviour into practice. Rebuild the example from its HTML, then compare your result with the CSS solution. Change the content and the viewport before calling it finished.
How it works
- Shared typography and spacing can align different controls while preserving their platform behaviour. Native selects and checkboxes may still differ between operating systems.
- Labels, input types, and instructions belong in HTML. CSS can improve legibility and feedback but cannot supply missing form semantics.
- The static preview disables form controls. Copy the example to a local page to test focus, typing, selection, and validation.
Your task
Use the HTML below to explore this rule: Shared typography and spacing can align different controls while preserving their platform behaviour. Native selects and checkboxes may still differ between operating systems. Write your own CSS before opening the solution. Then replace the heading with a longer one and verify that the content is still readable.
Review the CSS solution
input, select, button { font: inherit; border: 1px solid #879e8b; border-radius: 6px; padding: 10px; }
button { background: #235f46; color: white; }
A solution to compare
The HTML supplies the content; the CSS below styles it. Open both together in the playground, then change the lesson rules at the end of the stylesheet.
<form class="card"><label for="name">Your name</label><input id="name" type="text" placeholder="Alex"><label for="choice">Workshop</label><select id="choice"><option>Repair club</option><option>Woodwork</option></select><button type="button">Save your choice</button><p class="hint">All experience levels welcome.</p></form>
body { margin: 0; padding: 24px; font-family: system-ui, sans-serif; color: #25332d; background: #f4f7f2; }
.card { padding: 20px; background: white; border: 1px solid #d4dfd6; }
h2 { margin-top: 0; }
p { line-height: 1.6; }
a { color: #17634c; }
.badge { display: inline-block; margin-bottom: 12px; font-size: .8rem; }
.layout { display: grid; gap: 16px; }
.photo { width: 100%; height: 160px; background: linear-gradient(135deg, #e4af6b, #668cba); }
button, input, select { font: inherit; padding: 8px; }
label { display: block; margin-block: 12px 4px; }
/* This lesson */
input, select, button { font: inherit; border: 1px solid #879e8b; border-radius: 6px; padding: 10px; }
button { background: #235f46; color: white; }
Shared typography and spacing can align different controls while preserving their platform behaviour. Native selects and checkboxes may still differ between operating systems.