如何删除 Firefox 中 SELECT/OPTION 下拉控件上的虚线？

Question

在 Chrome 和其他浏览器中，我的下拉菜单看起来很好：

但是，在 Firefox 中，它有不需要的虚线：

我已经使用这些 CSS 语句成功删除了 buttons 和 input 元素中不需要的 Firefox 虚线：

button::-moz-focus-inner { border: 0; }
input::-moz-focus-inner { border: 0; }

所以我认为这些适用于 select/option 元素，但他们不：

select::-moz-focus-inner { border: 0; }
option::-moz-focus-inner { border: 0; }

如何删除此下拉列表中的虚线，以便它在 Chrome 和其他浏览器中显示？

附录

这些也不起作用：

select::-moz-focus-inner { border: 0; outline: 0 }
option::-moz-focus-inner { border: 0; outline: 0 }

也不起作用：

select { outline: 0; }
option { outline: 0; }

也不起作用：

select { outline: none; }
option { outline: none; }

Answer 1

詹姆斯·布罗德（James Broad）的答案近乎完美，但选项项的“仅阴影”文本看起来很丑。这对我来说非常有效：

select:-moz-focusring {
  color:transparent;
  text-shadow:0 0 0 #000; /* your normal text color here */
}
select:-moz-focusring * {
  color:#000; /* your normal text color here */
  text-shadow:none;
}

Answer 2

这是组合黑客：

select:focus {
    outline: 1px solid white;
    outline-offset: -2px;
}
select ~ input[type=button] {
    -moz-appearance: menulist-button;
    margin-left: -19px;
    width: 18px;
    height: 18px;
    z-index: 10;
}

然后在每次选择后添加 tabindex=0 的输入
还有一些焦点“委托”的代码：

$("select ~ input[type=button]").addEvent('focus', function(){
  this.getPrevious().focus();
});

Answer 3

https://stackoverflow.com/a/18853002/728855 上找到的解决方案似乎工作得很好。

简而言之：

select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}

其中 #000 是您的文本颜色。

Answer 4

如果与 required 一起使用，如下面的代码：

<select required="true">
    <option value="" selected="true" disabled="true" hidden="true">Select a Option</option>
    <option value="">Option</option>
</select>

您需要为 select:required:invalid 设置相同的参数，如下所示：

select {
  &:required {
    &:invalid {
      color: transparent;
      text-shadow: 0 0 0 rgba(0, 0, 0, .4);
    }
  }

  &:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 rgba(0, 0, 0, .4);
  }
}

Answer 5

尝试使用 outline: 0, 适用于按钮