CSS Style Forms
Styling forms means giving inputs, labels, and buttons consistent spacing, borders, and colors so they feel like part of your design.
#Jobseeker
Find matching jobs & Auto apply with AI
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
