Style native controls without hiding their behavior.

• appearance
• accent-color
• focus rings
• input states
• form layout

Style a form while retaining clear focus, disabled, and error states.

• Open the result in a browser and inspect the HTML and computed CSS.
• Test at narrow and wide widths and use the keyboard for interactive elements.
• Write down one thing you changed after testing.

Style form controls while retaining their native roles and behaviors. Inherit the page font for inputs and buttons, provide enough padding for comfortable interaction, and keep border and focus states distinct. Accent-color is a convenient way to color native checkboxes and radio buttons. Appearance changes require careful testing because some browser affordances may disappear.

A placeholder can vanish as soon as typing starts, so it cannot carry essential instructions. A custom checkbox that hides the real input may break focus and labeling.

Style a search field, checkbox, and two buttons. Confirm that Tab order, label clicking, focus indicators, and disabled behavior still work.

• Rebuild the core idea without copying the example line by line.
• Explain the key HTML or CSS choice in your own words.
• Test the result at a narrow width and with keyboard navigation where relevant.

Open example.html in a browser. Edit style.css, save, and refresh.

Try: Change accent-color while keeping the checkbox recognizable.