How can I get rid of input border in chrome?

Question

In Chrome, my design has a light border or outline along the edges of the search input field. How can I get rid of this?

Answer 1

This snippet worked for me:

input:focus {
    box-shadow: none;
}

Answer 2

Hey, it is easy to remove outline. Just set none to input field's outline property in css.

For e.g.

form input[type=text]:focus, form input[type=password]:focus, textarea:focus {
    outline: none;
}

Above will remove outline border in chrome and safari browsers on form element focus.

Answer 3

input, select {
    outline: none;
}

This will disable the browser outline for all regular form elements.

Answer 4

If you mean the blue "glow", add this CSS:

outline: none;

Answer 5

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

Mind that this will disable the select element arrow.