CSS Forms
Default form controls look outdated in every browser. A handful of CSS rules turn them into the polished inputs users expect.
Properties that make the biggest difference
| Property | Why |
|---|---|
appearance: none | Strip native styling so your CSS actually wins. |
padding + line-height | Make hit-targets tap-friendly on phones (≥ 44px). |
border-radius | Soft corners — the single biggest "modernization" knob. |
:focus-visible | Accessible keyboard outline without bothering mouse users. |
::placeholder | Soft grey hint inside the field. |
:invalid / :valid | Style live based on validation state. |
A modern input
CSS
.input {
appearance: none;
width: 100%;
padding: 10px 14px;
font: inherit;
border: 1px solid #ddd;
border-radius: 6px;
background: #fff;
transition: border-color 0.15s, box-shadow 0.15s;
}
.input:focus-visible {
outline: none;
border-color: #04AA6D;
box-shadow: 0 0 0 3px rgba(4,170,109,0.15);
}
.input::placeholder { color: #999; }
.input:invalid { border-color: #E44D26; }
Tip: Use
font: inherit on form controls. Browsers don't inherit fonts on inputs by default, which is why they look "off" from your body text.Example
Example
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Verdana, sans-serif; }
.box { background: #04AA6D; color: #fff; padding: 20px; border-radius: 6px; }
</style>
</head>
<body>
<h1>CSS Forms</h1>
<div class="box">Edit the CSS on the left, then click Run »</div>
</body>
</html>
Try it Yourself »
Exercise
Strip the browser-default styling from this input.
.input {
: none; }
A single property that resets native widget chrome.
Discussion
Loading…