在 webkit 中的选择标签上，边框半径超过 1px

Posted 2023-03-05

【中文标题】在 webkit 中的选择标签上，边框半径超过 1px

【英文标题】：border-radius with border more than 1px on select tag buggy in webkit

【发布时间】：2012-06-14 03:39:30

【问题描述】：

有人知道在 webkit 中跟踪“错误”的解决方法吗？

当我使用border-radius和border solid 1px在select标签上创建圆角边框时，它在webkit、FF等上运行良好

但当边框超过 1px 时，您可以看到容器背景与边框重叠。

你可以在这里看到它：http://dabblet.com/gist/2909020

（只需将边框：solid 2px #9ec3d6; 改为 1px 即可查看差异）

感谢您的帮助！

【问题讨论】：

这是 chrome 中的一个 bug，请看这里：code.google.com/p/chromium/issues/detail?id=81556

感谢 Bjoern 的回复，但如果我设置了大纲：没有丑陋的矩形边框仍然存在

好吧，既然这是一个错误，也许可以使用另一种方式来归档你想要的东西（也许是一种过时的方法，但你可以为此使用背景图像）。

【参考方案1】：

使用-webkit-appearance: none;，您可以隐藏矩形边框，但这也会隐藏选择框的常用下拉图标，但您可以添加一些背景图片来为选择框带回某种视觉指示器。

看看这些例子：http://37signals.com/svn/posts/2609-customizing-web-forms-with-css3-and-webkit

【讨论】：

@HimawanDjaja 实际上只有两行 CSS：-webkit-appearance: none; 和 background（你可以使用 data-uris）。我不知道更简单的方法。对不起

是的，但它与 firefox 不兼容，因为 -moz-appearance: none 有错误，您可以在这里看到它bugzilla.mozilla.org/show_bug.cgi?id=649849