Remove input blue outline color

Question

I'm using an input component and trying to remove the outline blue default color, but everything I tried failed

I already tried to change the CSS focus outline and box-shadow attributes

:focus {
  outline: 0px !important;
  -webkit-appearance: none;
  box-shadow: none !important
}

I expect the blue outline to disappear when focused on the input component

input outline

have you tried `outline:none`: https://jsfiddle.net/axmfkqLg/1/. If that doesn't work then you need to create a [mcve] as you probaby have other styles conflicting — Pete, Sep 04 '19 at 08:31

score 4 · Answer 1 · answered Sep 04 '19 at 08:44

This border is used to show that the element is focused. You can remove it, though:

input:focus{
    outline: none;
}

You may want to add some other way for users to know what element has keyboard focus though for usability.

Chrome will also apply to highlight to other elements such as DIV's used as modals. To prevent the highlight on those and all other elements as well, you can do:

*:focus {
    outline: none;
}

score 2 · Answer 2 · answered Sep 04 '19 at 08:32

2

*:focus {
    outline: none;
}

<div>
  <input />
</div>
<div>
  <textarea></textarea>
</div>
<div>
  <button>Test</button>
</div>

answered Sep 04 '19 at 08:32

kakamg0

1,096
5
12

score 1 · Answer 3 · answered Sep 04 '19 at 08:34

1

You just need to add this (no need for the :focus selector)-:

input{
  outline: none;
}

answered Sep 04 '19 at 08:34

Abhisar Tripathi

1,569
10
21

score 1 · Accepted Answer · answered Sep 04 '19 at 08:56

According to MDN

The outline CSS property is a shorthand to set various outline properties in a single declaration: outline-style, outline-width, and outline-color.

So when we set outline to none or 0, we are actually setting 3 properties

outline-style
outline-width
outline-color

This is obtain from chrome developer options:

outline:none; will set:

outline-color: initial;
outline-style: none;
outline-width: initial;

outline:0; will set:

outline-color: initial;
outline-style: initial;
outline-width: 0px;

In your case setting outline:none should do a trick.

Hope this helps. Happy Coding!!!

score 0 · Answer 5 · answered Sep 04 '19 at 08:33

Is this what you are expecting ? you can remove it by using outline:none And you can add other color to it by giving the color as border.

input:focus {
  outline: none;
  border: 1px solid red;
  box-shadow: 0 0 10px #719ECE;
}

<input type="text"></input>

score 0 · Answer 6 · answered Sep 04 '19 at 08:42

It is not easy to suggest a solution with out checking the code where issue is reproducible. Even it looks like an outline, it can the implemented as a border, box-shadow or something else. for example, in bootstrap, there is a thick light blue border on :focus of the form elements and they are actually box-shadow.

So you inspect your element and its pseudo classes like :hover, :focus, :active etc and find out exactly what makes the blue border effect and then overwrite that particular style with your own style.

Remove input blue outline color

6 Answers6