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

Question

我正在使用Twitter Bootstrap。

这是a fiddle with my code。这是打开的Github Issue

---

我使用附加按钮per the Bootstrap docs实现了搜索输入。表格的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 search inputs

<强>引用

  

WebKit对您在搜索输入上可以更改的内容有很大的时间限制。我猜这个想法是一致的。特别是在Safari中，搜索字段看起来就像浏览器右上角的搜索框一样。 WebKit中将忽略以下CSS“无论如何”，因为在！重要规则中你甚至无法对抗它。

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