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

Question

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?

Answer 1

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.