Form inputs and buttons that look the same in every browser

The same button and text field look clean in one browser and clash with the rest of the page in another.

Beginner to intermediateRead 5 minDoing: 45 minutes to an hour7 steps

▶ Start

What you'll have at the end

A set of inputs and buttons that keep one height, one border style and one font across browsers

Before you start

You need

A form with a search-like input, a dropdown built from options, and a submit control, plus a stylesheet you can edit before any component library's own control styles run.

Not covered

This does not cover custom-styled checkboxes, radio buttons, date pickers, range sliders, or animating hover and focus transitions; it only covers making a search box, a dropdown and a submit control share one plain look at rest.

Leans on

7 steps

Where to go next

Give a hover and focus state a smooth transition

for animating the hover and focus states on these controls once they already render the same at rest

Turn on box-sizing border-box before your first layout

for the full box-sizing story behind the border-box line this recipe's own reset leans on

Checked 20 Aug 2026

Part of the CSS cookbook