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;
    :     (, , , );
}

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;
    :  solid ;
    : ;
    : ;
    : ;
    :  ;
}

 {
    : none;
    : ;
    :     (, , , );
}

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.

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

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:

,
,
,
 {
    : none;
    :     (, , , );
}

:focus vs :focus-visible

/* 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 .

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?

• :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.