CSS Style Forms
Styling forms means giving inputs, labels, and buttons consistent spacing, borders, and colors so they feel like part of your design.
Browsers ship with plain default styles for form controls. A few well-chosen rules turn a bare form into something clean and readable, and attribute selectors let you target each kind of field.
Styling Text Inputs
Give inputs padding, a border, and a rounded corner. Setting <width: 100%> with <box-sizing: border-box> keeps them from overflowing their container.
A consistent input look
<!DOCTYPE html>
<html>
<head>
<style>
input[type='text'],
input[type='email'],
input[type='password'],
textarea {
width: 100%;
padding: 10px 12px;
border: 1px solid #ccc;
border-radius: 6px;
box-sizing: border-box;
font-size: 1rem;
}
</style>
</head>
<body>
<input type="text" placeholder="Full name">
<input type="email" placeholder="Email address">
<input type="password" placeholder="Password">
<textarea placeholder="Message"></textarea>
</body>
</html>Labels and Spacing
Make labels block-level so each field sits on its own line, and add margin below every group for breathing room.
Stacked label and field
<!DOCTYPE html>
<html>
<head>
<style>
.form-group {
margin-bottom: 16px;
}
label {
display: block;
margin-bottom: 6px;
font-weight: 600;
}
</style>
</head>
<body>
<div class="form-group">
<label for="name">Name</label>
<input type="text" id="name">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email">
</div>
</body>
</html>Styling the Submit Button
A primary button
<!DOCTYPE html>
<html>
<head>
<style>
button[type='submit'] {
padding: 10px 20px;
background: #00643c;
color: #ffffff;
border: none;
border-radius: 6px;
cursor: pointer;
}
button[type='submit']:hover {
background: #004d2e;
}
</style>
</head>
<body>
<button type="submit">Send message</button>
</body>
</html>- Use box-sizing: border-box so padding does not make inputs wider than expected
- Style :disabled and :invalid states to give users clear feedback
- Keep font-size at 16px or larger on mobile to stop browsers from zooming in on focus
- For the field currently being edited, see CSS Input Focus
