Question

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

@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中正确呈现并且有解决方法吗？

谢谢！

Answer 1

找到解决方案，无需解决方法。这可能是愚蠢的;我正在使用bootswatch的bootstrap主题，其中select的css有-webkit-appearance: none

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

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

根据W3

Answer 2

使用以下示例

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提供的常规类。

Bootstrap选择在Chrome中无法正确显示

2 个答案: