CSS Input Focus
The :focus pseudo-class lets you highlight the form field a user is currently interacting with, making forms easier to follow.
When a user clicks or tabs into an input, the browser gives it focus. Styling the focused state clearly shows where typing will go, which matters for both usability and accessibility.
Highlighting the Active Field
A common pattern changes the border color and adds a soft glow with <box-shadow> when a field gains focus.
A focus ring
<!DOCTYPE html>
<html>
<head>
<style>
input {
border: 1px solid #ccc;
border-radius: 6px;
padding: 10px;
}
input:focus {
border-color: #00643c;
box-shadow: 0 0 0 3px rgba(0, 100, 60, 0.2);
outline: none;
}
</style>
</head>
<body>
<input type="text" placeholder="Click to focus">
</body>
</html>Note: If you set outline: none, always replace it with another visible focus style such as a border change or box-shadow. Removing the indicator entirely makes the form unusable for keyboard users.
Focus, Hover, and Related States
Highlighting the Whole Field Group
Emphasize the group on focus
<!DOCTYPE html>
<html>
<head>
<style>
.form-group:focus-within label {
color: #00643c;
}
</style>
</head>
<body>
<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email">
</div>
</body>
</html>Note: Prefer :focus-visible for focus rings so mouse users do not see a ring on click, while keyboard users still get a clear indicator.
Exercise: CSS Forms
Why is box-sizing: border-box commonly applied to form inputs?
