How to Remove Input Focus Outline in CSS (Chrome) and Do It Accessibly

By the end of this page, you will understand what the browser focus outline is, how to remove it with CSS, and why replacing it with a custom focus style is usually better for accessibility. You will also see practical examples of :focus, outline, and safer ways to style active form fields.

Browsers add a focus indicator to form elements like input, textarea, and button when the user clicks them or tabs to them with the keyboard. In Chrome, this often appears as a blue or orange glow, border, or outline.

This focus indicator exists for a good reason:

• It shows which element is currently active.
• It helps keyboard users navigate forms.
• It improves usability and accessibility.

If you want to remove the default browser focus style, you usually target the :focus pseudo-class:

input:focus {
    outline: none;
}

This tells the browser not to draw the default outline when the input has focus.

However, removing the outline completely can make your form harder to use, especially for:

• keyboard users
• users with vision impairments
• anyone navigating quickly through a form

Because of that, a better approach is often to replace the default outline with your own visible focus style instead of removing it entirely.

For example:

input:focus {
    outline: none;
    border: 1px solid #4d90fe;
    box-shadow: 0 0 0 3px rgba(77, 144, 254, 0.25);
}

That gives you design control while still keeping a clear visual cue.

This concept matters in real programming because forms are everywhere:

• login pages
• search bars
• checkout forms
• admin dashboards
• settings screens

Understanding focus styling helps you build interfaces that look polished and remain usable.

Think of focus like a cursor spotlight on a stage.

When a user clicks or tabs into an input, the browser shines a light on that element so the user knows, "This is where typing will go."

• :focus means the spotlight is on
• outline is the browser's default spotlight effect
• removing it turns the spotlight off
• replacing it gives you your own custom spotlight

So the real question is usually not just, "How do I hide the spotlight?" but also, "What visible cue should I show instead?"

The key selector is :focus.

Remove the default outline

input:focus {
    outline: none;
}

This removes the browser's default focus outline.

Full example based on your CSS

input {
    background-color: transparent;
    border: 0;
    height: 20px;
    width: 160px;
    color: #ccc;
}

input:focus {
    outline: none;
}

What this does

• input styles the normal input state
• input:focus applies only when the input is active
• outline: none; removes the Chrome focus outline

Better: remove default outline and add your own focus style

input {
    background-color: transparent;
    border: 1px solid #999;
    height: 20px;
    width: 160px;
    color: #ccc;
    padding: 4px 8px;
}

input:focus {
    outline: none;
    border-color: #4d90fe;
    box-shadow: 0 0 0 3px rgba(77, 144, 254, 0.25);
}

This version is usually better because the user can still tell the input is focused.

HTML example

<input type="text" placeholder="Enter your name">

When the user clicks inside the input:

• the input matches input:focus
• the focus rule is applied
• the default outline is removed or replaced

Consider this example:

<input type="text" id="username" placeholder="Username">

input {
    border: 1px solid #aaa;
    padding: 6px;
}

input:focus {
    outline: none;
    border-color: blue;
}

Here is what happens step by step:

1. The page loads.
2. The input is displayed with a gray border because of border: 1px solid #aaa;.
3. The user clicks the input or tabs into it.
4. The input now matches the input:focus selector.
5. The browser applies the focus styles:
   • outline: none; removes the default focus outline
   • border-color: blue; changes the border color to blue
6. The user now sees your custom focus style instead of Chrome's default one.
7. When the user clicks elsewhere or tabs away, the input loses focus.
8. The :focus styles stop applying, and the input returns to its normal state.

This is a good example of a CSS state:

• normal state: input
• focused state: input:focus

Focus styling is used in many real interfaces.

Login and signup forms

A focused email or password field should clearly show where the user is typing.

Search bars

A search box often changes border color or glows when active.

Checkout forms

Address, card, and billing fields need strong focus states so users can move through them quickly.

Admin dashboards

Data entry forms often use custom focus styles to match the design system.

Mobile-friendly forms

Even on touch devices, active field styling helps users understand which input is selected.

Design systems

Teams often define one reusable focus style for all interactive components such as:

• inputs
• buttons
• selects
• textareas
• links

In real projects, developers usually do not remove focus styles globally without replacing them.

Common patterns include:

Custom reusable focus styles

A shared CSS class or component style is often used:

.form-control:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

Design-system consistency

Large codebases often make all interactive elements use the same focus behavior so the UI feels consistent.

Accessibility-first styling

Some teams use :focus-visible so the focus ring appears mainly for keyboard navigation:

input:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

This is useful because:

• mouse users may see less visual noise
• keyboard users still get a clear focus indicator

Guarding against invisible focus

A common rule in code review is:

• do not use outline: none; unless there is another visible focus style

Framework and component usage

In React, Vue, Angular, or plain HTML/CSS projects, the idea is the same: style the focused state of the input component rather than relying only on the browser default.

1. Removing focus without adding a replacement

Broken example:

input:focus {
    outline: none;
}

Why this is a problem:

• users may not know which field is active
• keyboard navigation becomes harder

Better:

input:focus {
    outline: none;
    border-color: #4d90fe;
    box-shadow: 0 0 0 3px rgba(77, 144, 254, 0.25);
}

2. Styling only input and forgetting other controls

Beginners often style text inputs but forget:

• textarea
• select
• button

Example:

input:focus,
textarea:focus,
select:focus,
button:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}

3. Setting border: 0 and leaving no visible shape

Your original CSS removes the border entirely:

input {
    border: 0;
}

That can make the field hard to see, especially on simple backgrounds. Often it is better to keep a subtle border.

4. Confusing border with outline

• border is part of the element's box
• outline is drawn outside the element

Changing one does not automatically change the other.

5. Using very faint custom focus styles

A barely visible shadow or low-contrast border is almost as bad as having no focus style at all.

Use clear contrast so the active element stands out.

:focus vs :focus-visible

Remove vs replace focus outline

/* Remove default focus outline */
input:focus {
    outline: none;
}

/* Better: replace it with a custom style */
input:focus {
    outline: none;
    border-color: #4d90fe;
    box-shadow: 0 0 0 3px rgba(77, 144, 254, 0.25);
}

/* Apply to multiple controls */
input:focus,
textarea:focus,
select:focus,
button:focus {
    outline: none;
}

/* Keyboard-friendly option */
input:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

Key points:

• Use :focus to style focused elements.
• outline is different from border.
• outline: none; removes the default focus ring.
• Prefer replacing the outline instead of removing it completely.
• box-shadow is commonly used for custom focus glow.
• :focus-visible is useful for better keyboard accessibility.

How do I remove the blue outline from an input in Chrome?

Use the :focus selector and set outline: none;:

input:focus {
    outline: none;
}

Why does Chrome show an outline on inputs?

Chrome shows a focus indicator so users can tell which field is active and ready for typing.

Is it bad to remove the input outline?

It can be, if you do not replace it with another visible focus style. Removing it completely can hurt accessibility.

What is the difference between outline and border?

A border is part of the element box and affects layout. An outline is drawn outside the element and usually does not affect layout.

Should I use :focus or :focus-visible?

Use :focus for general focus styling. Use :focus-visible when you want focus indicators to appear mainly during keyboard navigation.

Can I style focused inputs with box-shadow?

Yes. box-shadow is a common way to create a custom focus glow without changing layout.

Why is my input still highlighted after removing outline?

The browser or your CSS may also be applying border, box-shadow, or framework styles on focus. Inspect the element in DevTools to see which rule is active.

• :focus pseudo-class — the core selector for styling active elements.
• :focus-visible — a more accessibility-friendly way to show focus indicators.
• outline — the CSS property used by browsers for default focus rings.
• border — often used alongside or instead of outline for custom styles.
• box-shadow — commonly used to create custom focus glow effects.
• Form styling — inputs, textareas, buttons, and selects often need consistent state styling.
• Accessibility in CSS — important when changing default interactive behavior.
• Pseudo-classes — :hover, :active, and :focus are related element states.