打开下拉菜单时的黑色边框 - IE 10答案

【问题标题】：Black border when drop down menu is open - IE 10打开下拉菜单时的黑色边框 - IE 10
【发布时间】：2013-12-06 02:07:25
【问题描述】：

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

没关系，工作正常。

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

【问题讨论】：

标签： html css internet-explorer select

【解决方案1】：

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

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

【讨论】：

那么您认为使用 JS/Jquery 可以实现吗？至少对于 IE10？
不设置默认选择框的样式。但是您可以创建自己的（使用自定义样式），使它们看起来像普通的选择框。
另一种方式，我用于快速样式是this example 这将允许您也保留原点选择框，但仍然会在弹出窗口上有边框。
我要去 JS/Jquery 解决方案 - 有点长因为需要更改模板，但我得到了我想要的。 :) 干杯
有一个我没有考虑过的问题：如何处理我的后端表单？不能将 name="myform" 提供给 UL 标记，也不能将 value="myvalue" 提供给 LI 标记

【解决方案2】：

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

【讨论】：

【解决方案3】：

没有任何默认样式来删除边缘浏览器中的黑色。但是您可以通过使用 javascript、jquery pluing/library 来实现更改下拉菜单的自定义控制

【讨论】：