Question

我有以下选择下拉列表：

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

在谷歌浏览器中查看时，它会按预期显示，但在Firefox中查看时，下拉框中的向下箭头（我相信它的名字）被一个小盒子包围。

如何在CSS中删除它，这样它只显示带有插入符的普通按钮？

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

Answer 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

CSS：删除Firefox中的插入符号框

1 个答案: