input type search border-radius issue in Google Chrome

Question

I have an <input type="search"/> element (no other HTML).

Here's the CSS:

input[type=search] {
    border: 1px solid #000;
    padding: 4px 12px;
    border-radius: 8px;
}

In Firefox 7 it looks great:

However, in Chrome 15 the rounded corners are cut off:

View jsFiddle

Any way I can fix this?

Solution 1

You just need to add -webkit-appearance: none to fix it.

Solution 2

Try with -webkit-appearance: textfield;