我有以下选择下拉列表:
<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/