How to Remove Focus Border (Outline) Around Text/Input Boxes - Chrome

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

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

How to reset / remove chrome's input highlighting / focus border?

You should be able to remove it using

outline: none;

but keep in mind this is potentially bad for usability: It will be hard to tell whether an element is focused, which can suck when you walk through all a form's elements using the Tab key - you should reflect somehow when an element is focused.

How to remove the border highlight on an input text element

Before you do that, keep in mind that the focus outline is an accessibility and usability feature; it clues the user into what element is currently focused, and a lot of users depend on it. You need to find some other means to make focus visible.

In your case, try:

input.middle:focus {
    outline-width: 0;
}

Or in general, to affect all basic form elements:

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

In the comments, Noah Whitmore suggested taking this even further to support elements that have the contenteditable attribute set to true (effectively making them a type of input element). The following should target those as well (in CSS3 capable browsers):

[contenteditable="true"]:focus {
    outline: none;
}

Although I wouldn't recommend it, for completeness' sake, you could always disable the focus outline on everything with this:

*:focus {
    outline: none;
}

How to disable border if input is focused in Chrome/MS Edge?

Please add the following css:

input:focus{
  outline: none;
}

cant remove blue highlight chrome on focus

Add this CSS

.help-center .hc-search-form:focus-within{
   border: 0 none;
   box-shadow: none;
}

remove focus outline from link wrapping div (in Chrome)

You can do some easy CSS, applying no outline to the parental a tag and instead adding it around the image.

.card  { display: inline-block; border-radius: 5px; width: 250px; margin: 5px; vertical-align: top;  text-align: left;}
.nolink:focus {  outline: 0 none !important;}
.nolink:focus .card img {  border: 2px solid blue;  box-shadow: 1px 1px 1px 0 #888;}
.card img{ width: 250px; height: 250px;}

<html><body><a class='nolink' href='tree.com'><div class='card' ><img src='https://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg/220px-Ash_Tree_-_geograph.org.uk_-_590710.jpg'/></div></a></body></html>

How to remove an input border?

You can remove it with outline:none, but it creates accessibility issues.

input {  font-size: 300%;  border-width: 10px;  border-style: solid;  border-radius: 30px;  outline:none;}

<input>

How to Remove Focus Border (Outline) Around Text/Input Boxes - Chrome