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

时间:2014-09-13 20:21:30

标签: html css twitter-bootstrap

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

enter image description here

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

我能做些什么来摆脱它?

1 个答案:

答案 0 :(得分: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上),这样我们就可以验证导致边界问题的原因。有几个可能的原因,但上面的代码应该解决最常见的原因。