当下拉菜单打开时黑色边框 - IE 10

Question

我已经建立了一个下拉菜单，我自定义了向下箭头。

那没关系。

在IE 10中，当我打开下拉列表时，我有黑色边框。

有没有办法降低那些或改变颜色？

CSS

#contact #tabs #bord td select {
    background: url("/static/img/down-arrow.png") no-repeat right #fff;
    border:none;
    padding: 0 5px;
    overflow:hidden;
    width: 120%; 
   -webkit-appearance: none;
   -moz-appearance: none;
   -ms-appearance: none;
   -o-appearance: none;
    appearance: none;
}

select::-ms-expand {
       display: none;

 }

HTML / CMS模板

 <td colspan="2">
      <div class="styleSelect">
    <select name="topic" class="desktopDropDown" style="border:none;">
                    {% with request|enquiry_topics as topics %}
                    {% for t in topics %}
                    <option value="{{t.id}}">{{t}}</option>
                    {% endfor %}
                    {% endwith %}
             </select>
      </div>

Answer 1

不幸的是，选择框上的弹出窗口无法在包括IE10在内的任何浏览器上设置样式。

您可以使用this library创建自定义下拉菜单。但是您需要添加Javascript来填充表单字段或执行其他功能。

Answer 2

在你的CSS中尝试text-decoration: none;我没有检查，但它可能有助于摆脱边界。有时（例如在标签上）IE创建边框以显示它不仅仅是纯文本而是交互式东西

Answer 3

没有任何默认样式可在边缘浏览器中消除黑色。但是您可以使用javascript，jquery pluing / library来实现下拉列表的更改自定义控件