Bootstrap Select 在 Chrome 中显示不正确

Question

我在 ASP.NET MVC 项目中有一个使用 bootstrap 的表单，它使用多个 select 元素并使用 Razor 助手：

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

创建元素：

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

这在 IE 和 Firefox 中工作得很好，但在 Chrome 中查看时，下拉列表中的箭头丢失了，因此该元素看起来是文本输入。但是，单击该元素仍会显示 select 菜单。

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

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

谢谢！

Answer 1

Bootstrap class .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 提供的常规 class 多。

Answer 2

找到不需要解决方法的解决方案。这也许很愚蠢；我正在使用来自 bootswatch 的 bootstrap 主题，其中 select 的 css 有 -webkit-appearance: none

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

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

根据W3

Bootstrap Select 在 Chrome 中显示不正确

Bootstrap Select not appearing correctly in Chrome

html

asp.net-mvc

google-chrome

razor

twitter-bootstrap