6

我正在使用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）上查看表单时，会出现如下屏幕截图所示的搜索框： Bootstrap 搜索输入附加圆角

当我在桌面浏览器中查看搜索表单并将其调整为“移动大小”时，搜索框正确显示，如第二个屏幕截图所示（忽略较浅的边框和大小差异）：

桌面上的引导搜索输入

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

如何防止搜索输入像第一个屏幕截图一样显示不正确？什么可能导致这种情况？我查看了两个搜索输入的源样式和计算样式，一切似乎都是一样的。帮助？

如果我将其更改input type="search"为type="text"问题不存在，那么它必须在 CSS 中的某个地方，但我无法弄清楚。什么 CSS 实际应用了这种效果？

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

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

4

1 回答 1

1

看起来你不能。看到这个链接

webkit html5 搜索输入

引用：

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

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

于 2013-03-28T21:20:17.710 回答