CSS：在Firefox

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