How to remove focus border (outline) around text/input boxes? (Chrome)

Css Problem Overview

Can anyone explain how to remove the orange or blue border (outline) around text/input boxes? I think it only happens on Chrome to show that the input box is active. Here's the input CSS I'm using:

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

Text box with blue outline and

Css Solutions

Solution 1 - Css

This border is used to show that the element is focused (i.e. you can type in the input or press the button with Enter). You can remove it with outline property, though:

textarea:focus, 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 highlighting 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;
}

⚠️ Accessibility warning

Please notice that removing outline from input is an accessibility bad practice. Users using screen readers will not be able to see where their pointer is focused at. More info at a11yproject

Solution 2 - Css

The current answer didn't work for me with Bootstrap 3.1.1. Here's what I had to override:

.form-control:focus {
  border-color: inherit;
  -webkit-box-shadow: none;
  box-shadow: none;
}

Solution 3 - Css

input:focus {
    outline:none;
}

This will do. Orange outline won't show up anymore.

Solution 4 - Css

<input style="border:none" >

Worked well for me. Wished to have it fixed in html itself ... :)

Solution 5 - Css

I've found the solution.
I used: outline:none; in the CSS and it seems to have worked. Thanks for the help anyway. :)

Solution 6 - Css

this remove orange frame in chrome from all and any element no matter what and where is it

*:focus {
    outline: none;
}

Solution 7 - Css

Solution

*:focus {
    outline: 0;
}

PS: Use outline:0 instead of outline:none on focus. It's valid and better practice.

Solution 8 - Css

Please use the following syntax to remove the border of text box and remove the highlighted border of browser style.

input {
    background-color:transparent;
    border: 0px solid;
    height:30px;
    width:260px;
}
input:focus {
    outline:none;
}

Solution 9 - Css

Set

input:focus{
    outline: 0 none;
}

"!important" is just in case. That's not necessary. [And now it's gone. –Ed.]

Solution 10 - Css

I found out that you can also use:

input:focus{
   border: transparent;
}

Solution 11 - Css

This will definitely work. Orange outline will not show anymore.. Common for all tags:

*:focus {
    outline: none;
}

Specific to some tag, ex: input tag

input:focus {
   outline:none;
}

Content Type	Original Author	Original Content on Stackoverflow
Question	Joey Morani	View Question on Stackoverflow
Solution 1 - Css	CEich	View Answer on Stackoverflow
Solution 2 - Css	gwintrob	View Answer on Stackoverflow
Solution 3 - Css	azram19	View Answer on Stackoverflow
Solution 4 - Css	Kailas	View Answer on Stackoverflow
Solution 5 - Css	Joey Morani	View Answer on Stackoverflow
Solution 6 - Css	nonamehere	View Answer on Stackoverflow
Solution 7 - Css	Touhid Rahman	View Answer on Stackoverflow
Solution 8 - Css	Tabish	View Answer on Stackoverflow
Solution 9 - Css	madd	View Answer on Stackoverflow
Solution 10 - Css	Refilon	View Answer on Stackoverflow
Solution 11 - Css	Prashant Gupta	View Answer on Stackoverflow