带附加按钮的Bootstrap搜索输入 - 在所有侧面显示圆角

Question

我正在使用Twitter Bootstrap.

这是我的代码的小提琴.这是开放的Github问题

---

根据Bootstrap文档,我已经使用附加按钮实现了搜索输入.我HTML的表格在这里显示

<form class="form-search text-center" method="get" action="#">
  <div class="input-append">
    <input type="search" class="span7 search-query" name="q" autocomplete="off" placeholder="SEARCH" tabindex="1">
    <button type="submit" class="btn"><i class="icon-search icon-large"></i> </button>
  </div>
</form>

出于某种原因,在移动设备(即iPhone 5)上查看表单时,搜索框会出现,如下面的屏幕截图所示:

当我在桌面浏览器中查看搜索表单并将其调整为"移动大小"时,搜索框会正确显示,如第二个屏幕截图所示(忽略较轻的边框和大小差异):

--------- 问题 ---------

如何防止搜索输入显示不正确,如第一个屏幕截图中所示？什么可能导致这个？我查看了两个搜索输入的源和计算样式,一切看起来都是一样的.救命？

如果我改变了input type="search"对type="text"这个问题不存在,所以它一定是在某处CSS,但我不能弄明白.什么CSS实际应用这种效果？

--------- 更新 ---------

如果我切换<div class="input-append">到<div class="input-prepend">搜索输入显示正确.此外,当场具有焦点时,右侧的圆角变为"方形"并正确显示.

Answer 1

看起来你不能。请参阅此链接

webkit html5 搜索输入

引用：

WebKit 对搜索输入的更改内容有很大的时间限制。我猜这个想法是一致性。特别是在 Safari 中，搜索字段看起来就像浏览器右上角的搜索框。“无论如何”，下面的 CSS 在 WebKit 中都会被忽略，就像你甚至无法用 !important 规则来对抗它一样。

换句话说，Safari 将忽略您的样式，并应用标准外观。