CSS：在 Firefox 中删除插入符号周围的框答案

【问题标题】：CSS : Remove box surrounding caret in FirefoxCSS：在 Firefox 中删除插入符号周围的框
【发布时间】：2014-09-19 22:41:25
【问题描述】：

我有以下选择下拉菜单：

<div class="form-group">
    <label for="diagnosticMode" class="control-label col-xs-2">Policy Organisation:</label>
    <select id="DD1" name="PolicyOrganisation" class="btn btn-default">
        <option value="-1">Select</option>
        @foreach (var item in ViewBag.PolicyOrgs)
        {
            <option value="@item.Id">@item.Name</option>
        }
    </select>
</div>

在 Google Chrome 中查看时，它会按预期显示，但在 Firefox 中查看时，下拉框向下箭头（我相信它的名字是插入符号）被一个小框包围。

如何在 CSS 中删除它，使其只显示一个带有插入符号的普通按钮？

对于那些可能发现此线程希望删除箭头的人，请看这里： remove default select box arrow in firefox

【问题讨论】：

是的，如何删除 CSS 中插入符号周围的小框，使其仅显示带有插入符号的普通按钮？

标签： html css firefox

【解决方案1】：

    select{
        width: 200px !important;
        border: 1px solid gray ! important;
        outline : medium none !important;
        display: inline-flex !important;
        height: 25px !important;
        vertical-align: top;
        -webkit-appearance: none;
    }
    select::-ms-expand {
        display: none;
    }

<div class="form-group">
    <label for="diagnosticMode" class="control-label col-xs-2">Policy Organisation:</label>
    <select id="DD1" name="PolicyOrganisation" class="btn btn-default">
        <option value="-1">Select</option>
        @foreach (var item in ViewBag.PolicyOrgs)
        {
            <option value="@item.Id">@item.Name</option>
        }
    </select>
</div>

jsfiddle

【讨论】：