How to Get Rid of Input Border in 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 can I get rid of input border in chrome?

form#search input[type="search"] { 
    -webkit-appearance: none; 
}

Mind that this will disable the select element arrow.

How to remove 3D border of input filed in Chrome

First of all you are adding a 2px border on :focus, so hence, the field moves as border takes space outside the element and not inside, to get rid of the Chromes grey border, you need to use -webkit-appearance: none; and also use -moz-appearance: none; which will get rid of the grey border in chrome, and nice looking input field in firefox...

input {
    padding: 4px;
    -webkit-appearance: none; 
    -moz-appearance: none; 
}

Demo

Now, to standardize more, add border: 2px solid #eee; on the input tag

input {
    padding: 4px;
    -webkit-appearance: none; 
    -moz-appearance: none; 
    border: 2px solid #eee; /* Here */
}

Demo 2

Note: You are using general element selectors, so all the input
fields will be affected, consider using a class or an id instead.

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

remove borders around html input

border: 0 should be enough, but if it isn't, perhaps the button's browser-default styling in interfering. Have you tried setting appearance to none (e.g. -webkit-appearance: none)

how to remove border from textbox in chrome

Adding -webkit-appearance:none; will resolve it. This is a useful hack for form controls in WebKit.