twitter-bootstrap Bootstrap Select 未在 Chrome 中正确显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28752296/
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 Select not appearing correctly in Chrome
提问by scurrie
I have a form in a ASP.NET MVC project using bootstrap that makes use of several select elements using the Razor helper:
我在使用引导程序的 ASP.NET MVC 项目中有一个表单，该表单使用 Razor 助手使用多个选择元素：
@Html.DropDownListFor(m => m.project_type, project_type_items, new { @class = "form-control" })
Which creates the element:
创建元素：
<select id="project_type" class="form-control">
This works just fine in IE and Firefox but viewed in Chrome, the arrow on the drop down list is missing so that the element appears to be a text input. Clicking on the element will still display the select menu however.
这在 IE 和 Firefox 中工作正常，但在 Chrome 中查看，下拉列表中的箭头丢失，因此该元素似乎是文本输入。但是，单击该元素仍将显示选择菜单。
In researching this I did not find info regarding this issue in Chrome, however I did stumble across a similar issue regarding the default Android browser: http://getbootstrap.com/getting-started/and PhoneGap build webkit-appearance no drop down arrow for select tag
在对此进行研究时，我没有在 Chrome 中找到有关此问题的信息，但是我确实偶然发现了有关默认 Android 浏览器的类似问题：http: //getbootstrap.com/getting-started/和PhoneGap build webkit-appearance no drop down arrow用于选择标签
My question is: why are these selects not rendering correctly in Chrome and is there a work around for this?
我的问题是：为什么这些选择无法在 Chrome 中正确呈现，是否有解决方法？
Thanks!
谢谢！
回答by scurrie
Found a solution without requiring a workaround. This was perhaps silly; I am using a bootstrap theme from bootswatch in which the css for select had -webkit-appearance: none
找到了不需要解决方法的解决方案。这也许很愚蠢；我正在使用 bootswatch 中的 bootstrap 主题，其中 select 的 css-webkit-appearance: none
The following edit solved the issue in Chrome (and presumably Safari):
以下编辑解决了 Chrome（大概是 Safari）中的问题：
select.form-control {
-webkit-appearance: menulist;
}
as per W3
根据W3
回答by nico_c
Bootstrap class .form-controlworks fine in Chrome with the following example:
Bootstrap 类.form-control在 Chrome 中运行良好，示例如下：
<select class="form-control">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
<option value="five">Five</option>
</select>
However, if you're looking for a workaround because it just isn't working for you then you can do something like this:
但是，如果您正在寻找一种解决方法，因为它对您不起作用，那么您可以执行以下操作：
<div class="btn-group btn-group-xs">
<a href="@Url.Action("Trash", new {post.Id})" class="btn btn-danger" data-post="Are you sure you want to trash this post?"> Trash</a>
<a href="#" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
<a href="@Url.Action("Delete", new {post.Id})"> Delete</a>
</li>
</ul>
</div>
The above is a work around I got from a tutorial that I use more than the regular class provided by Bootstrap.
以上是我从教程中获得的解决方法，我使用的教程比 Bootstrap 提供的常规类要多。
