Google Chrome 中的输入类型搜索边框半径问题

Posted 2023-03-06

【中文标题】Google Chrome 中的输入类型搜索边框半径问题

【英文标题】：input type search border-radius issue in Google Chrome

【发布时间】：2011-12-19 07:07:37

【问题描述】：

我有一个 <input type="search"/> 元素（没有其他 html）。

这是 CSS：

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

在 Firefox 7 中看起来很棒：

但是，在 Chrome 15 中，圆角被切除了：

View jsFiddle

有什么办法可以解决这个问题？

【问题讨论】：

FWIW，它在 Mac 上的 Chrome 15 中运行良好。

@BenjieGillam 这很奇怪！我想我最终会使用包装器 <div> 并改为样式。

【参考方案1】：

试试-webkit-appearance: textfield;

【参考方案2】：

您只需要添加-webkit-appearance: none 即可修复它。