When you click or focus on an input field in a form, browsers often apply a default border highlight or glow effect. While this is useful for accessibility and user interaction feedback, you may want to remove or customize it to better fit your design.
In this guide, you’ll learn how to remove the input border highlight using CSS in a clean and accessible way.
🔍 What Is the Input Border Highlight?
Most browsers apply a default outline or border glow to inputs when they are focused. For example:
- Chrome: Blue glow (
outline) - Firefox: Solid inner border
- Safari: Inner shadow
✅ Method 1: Remove the Highlight Using outline: none;
The outline property is responsible for the highlight effect. To remove it:
input:focus {
outline: none;
}
📌 Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Remove Input Highlight</title>
<style>
input {
padding: 8px;
border: 1px solid #ccc;
}
input:focus {
outline: none; /* Removes the browser highlight */
border-color: #888; /* Optional custom border */
}
</style>
</head>
<body>
<input type="text" placeholder="Focus me...">
</body>
</html>
🎨 Method 2: Remove Highlight and Add Custom Style
Instead of just removing the highlight, it’s better to replace it with a custom style for usability:
input:focus {
outline: none;
border: 2px solid #007BFF; /* Custom focus color */
box-shadow: none;
}
This maintains a visual cue for users without relying on the browser’s default style.
⚠️ Accessibility Tip
Don’t completely remove the focus indication without replacing it. Users navigating with a keyboard or screen reader rely on visual cues. If you hide outline, always provide an alternative using border, box-shadow, or background color.
input:focus {
outline: none;
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}
🧾 Conclusion
To remove the input border highlight, use outline: none in your CSS. For better usability and accessibility, replace it with a custom focus style using border or box-shadow. This gives you full control over form styling while keeping your UI user-friendly and inclusive.
Pro Tip: Want to apply the same effect to textarea, select, or custom form components? Use the same :focus rule with those elements.
