CODEWITHSUNDEEP
cssgoogle-chromeinputborder
Bilal Akil
Bilal Akil

Reputation: 4755

How to remove the apparently un-removable input type="search" border in Chrome

I've tried quite a bit of stuff... but the border just won't go away. Works fine if you were to replace type="search" with type="text", but I'd hope that's not what I'm required to do.

I'm trying to kill it with

input{
    background:transparent;
    border:0;
    border-color:transparent;
    outline:none;
    width:150px;
}​

but none of them seem to do the job.

http://jsfiddle.net/Kf9Mu/

Any ideas?

Upvotes: 6

Views: 6613

Answers (4)

tim
tim

Reputation: 3903

dont't forget about -webkit-user-select: none;

Upvotes: 0

Yassir Ennazk
Yassir Ennazk

Reputation: 7169

Try this:

input:focus {
    outline: none;
}

Upvotes: 0

reima
reima

Reputation: 2126

You should try

-webkit-appearance: none;

Also see http://37signals.com/svn/posts/2609-customizing-web-forms-with-css3-and-webkit

Upvotes: 4

Shane O'Connor
Shane O'Connor

Reputation: 704

Apparently Webkit has a custom style for search input fields. You can get rid of it directly then apply your own borders. I removed it here and gave it a red border.

input{
  -webkit-appearance: none;
  border: 1px solid red;
}​

http://jsfiddle.net/Kf9Mu/7/

I've only looked at this in Chrome.

Upvotes: 12

Related Questions