未在type =“search”输入上显示的圆角

Question

当我输入type =“search”时，圆角会被剪掉。当我使用type =“text”时，它们看起来很棒。

#q { padding: 8px; outline: none; width: 282px; border: 1px solid #ccc; border-radius: 5px; }

<input type="search" id="q" placeholder="search..." />

住在这里：http://jsbin.com/ilipiw/4/edit

截图：

我正在使用最新版本的Chrome。

Answer 1

试试这个：

#q { -webkit-appearance: none; -webkit-border-radius: 5px; outline: none; border: 1px solid #999; padding: 10px; }

Answer 2

将此样式用于#q：

#q { 
    border-radius: 5px; outline: none; border: 1px solid #999; padding: 10px; 
    -webkit-appearance: none; -webkit-border-radius:5px;
}

此jsBin version适用于Chrome 18.0.1025.162。

Answer 3

虽然它应该有用。

                 #q{-webkit-border-radius:5px;}

如果这不起作用，请更新您的Chrome。