CODEWITHSUNDEEP
cssgoogle-chrome
conbask
conbask

Reputation: 10061

How can I get rid of input border in chrome?

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?

Upvotes: 13

Views: 19260

Answers (5)

Ernesto Hegi
Ernesto Hegi

Reputation: 333

This snippet worked for me:

input:focus {
    box-shadow: none;
}

Upvotes: 2

seler
seler

Reputation: 9193

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

Mind that this will disable the select element arrow.

Upvotes: 17

zrooda
zrooda

Reputation: 3683

input, select {
    outline: none;
}

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

Upvotes: 8

gautamlakum
gautamlakum

Reputation: 12015

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.

Upvotes: 2

user578895
user578895

Reputation:

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

outline: none;

Upvotes: 29

Related Questions