html - ="search"类型的输入没有显示圆 Angular

Question

当我输入 type="search"时，圆 Angular 被剪掉了。当我使用 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:

#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。