Bootstrap Select 在 Chrome 中未正确显示答案

【问题标题】：Bootstrap Select not appearing correctly in ChromeBootstrap Select 在 Chrome 中未正确显示
【发布时间】：2015-04-29 09:51:57
【问题描述】：

我在一个使用引导程序的 ASP.NET MVC 项目中有一个表单，该表单使用 Razor 帮助程序使用了几个选择元素：

@Html.DropDownListFor(m => m.project_type, project_type_items, new { @class = "form-control" })

创建元素：

<select id="project_type" class="form-control">

这在 IE 和 Firefox 中运行良好，但在 Chrome 中查看时，下拉列表上的箭头缺失，因此该元素似乎是文本输入。但是，单击元素仍将显示选择菜单。

在研究这个问题时，我没有在 Chrome 中找到有关此问题的信息，但我确实偶然发现了有关默认 Android 浏览器的类似问题： http://getbootstrap.com/getting-started/ 和PhoneGap build webkit-appearance no drop down arrow for select tag

我的问题是：为什么这些选择不能在 Chrome 中正确呈现，是否有解决方法？

谢谢！

【问题讨论】：

可能相关也可能不相关，但您错过了 " 的 form-control 课程的结束。
@NicolásCarlo 哎呀，我会编辑它。在我的代码中是正确的，我在这里简化了它而不是复制/粘贴。感谢您了解这一点。

标签： html asp.net-mvc twitter-bootstrap google-chrome razor

【解决方案1】：

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>

但是，如果您正在寻找解决方法，因为它对您不起作用，那么您可以执行以下操作：

<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>

以上是我从一个教程中得到的解决方法，我使用的比 Bootstrap 提供的常规类更多。

【讨论】：

【解决方案2】：

无需解决方法即可找到解决方案。这可能很愚蠢。我正在使用 bootswatch 中的引导主题，其中用于选择的 css 具有 -webkit-appearance: none

以下编辑解决了 Chrome（可能是 Safari）中的问题：

select.form-control {
    -webkit-appearance: menulist;
}

根据W3

【讨论】：