形成非白色背景的奇怪边框

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上），这样我们就可以验证导致边界问题的原因。有几个可能的原因，但上面的代码应该解决最常见的原因。