html - 表格内有非白色背景奇怪的边框

Question

在一个非白色背景的 div 中，当我添加一个输入元素时，它给我这个丑陋的边框。

<div class="input-group">
   <input type="search" style="height:30px;">
</div>

我该怎么做才能摆脱它？

Answer 1

这很不寻常...您使用什么浏览器查看此内容？您有可以向我们展示的源页面吗？我想知道这是否是浏览器定义的默认值，或者您有其他一些 CSS 导致了这种情况。

无论如何，对此有一个简单的答案:设置您自己的边框。

像这样:

<div class="input-group">
   <input type="search" style="height:30px; border: 1px inset grey;">
</div>

如果您希望 iPhone 也呈现完全相同的边框，您也可以使用它(Apple 设备喜欢以自己的方式设置样式，这将覆盖它):

<div class="input-group">
   <input type="search" style="height:30px; border: 1px inset grey; -webkit-appearance: none;">
</div>

我仍然建议发布一个指向真实示例的链接(可能在 jsfiddle.net 上)，这样我们就可以验证导致边界问题的原因。有多种可能的原因，但上面的代码应该可以解决最常见的问题。