html - 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版本适用于 Chrome 18.0.1025.162。

Answer 3

虽然它应该工作。

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

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