我有以下选择下拉列表:

<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

最佳答案

    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

关于html - CSS:在Firefox中删除围绕插入符号的框,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/25935989/

10-12 12:24
查看更多