twitter-bootstrap 带有附加按钮的 Bootstrap 搜索输入 - 在所有边上显示圆角
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15682192/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap Search Input with Appended Button - Displaying Rounded Corners on All Sides
提问by adamdehaven
I'm using Twitter Bootstrap.
我正在使用Twitter Bootstrap。
Here's a fiddle with my code. And here's the opened Github Issue
I have implemented a search input with an appended button, per the Bootstrap docs. My HTMLfor the form is shown here
根据 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>
For some reason, when viewing the form on mobile (i.e. iPhone 5) the search box appears as displayed in the screenshot below:
出于某种原因，当在移动设备（即 iPhone 5）上查看表单时，搜索框会出现，如下面的屏幕截图所示：
When I view the search form in a desktop browser and resize it to "mobile size," the search box appears correctlyas shown in this second screenshot (disregard the lighter border and size difference):
当我在桌面浏览器中查看搜索表单并将其调整为“移动尺寸”时，搜索框正确显示，如第二个屏幕截图所示（忽略较亮的边框和大小差异）：
--------- QUESTION---------
---------问题---------
How can I prevent the search input from displaying incorrectly as in the first screenshot? And what could be causing this? I've looked at the source and computed styles for both search inputs, and everything appears to be the same. Help?
如何防止搜索输入在第一个屏幕截图中显示不正确？什么可能导致这种情况？我查看了两个搜索输入的源样式和计算样式，一切似乎都相同。帮助？
If I change the input type="search"to type="text"the problem does not exist, so it's got to be somewhere in the CSS, but I can't figure it out. What CSS actually applies this effect?
如果我更改input type="search"为type="text"问题不存在，那么它必须在 CSS 中的某个地方，但我无法弄清楚。什么 CSS 实际应用了这种效果？
--------- UPDATE---------
---------更新---------
If I switch <div class="input-append">to <div class="input-prepend">the search input displays correctly. Also, when the field has focus, the rounded corner on the right turns "square" and appears correctly.
如果我切换<div class="input-append">到<div class="input-prepend">搜索输入显示正确。此外，当该字段具有焦点时，右侧的圆角会变成“方形”并正确显示。
回答by vals
Looks like you can not. See this link
看起来你不能。看这个链接
quote:
引用：
WebKit has big time restrictions on what you can change on a search input. I would guess the idea is consistency. In Safari particularly, search fields look just like the search box in the upper right of the browser. The following CSS will be ignored in WebKit "no matter what", as in, you can't even fight against it with !important rules.
WebKit 对您可以在搜索输入上更改的内容有很大的时间限制。我猜这个想法是一致性。特别是在 Safari 中，搜索字段看起来就像浏览器右上角的搜索框。以下 CSS 将在 WebKit 中“无论如何”被忽略，因为您甚至无法使用 !important 规则来对抗它。
In others words, Safari will ignore your styles, and apply the standard look.
换句话说，Safari 将忽略您的样式，并应用标准外观。
