How to remove focus border (outline) around text/input boxes? (Chrome) [duplicate]
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
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;}
input:focus { outline:none;}This will do. Orange outline won't show up anymore.