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

Posted 2023-03-06

技术标签:

【中文标题】如何在 Firefox 中删除 SELECT/OPTION 下拉控件上的虚线？【英文标题】：How can I remove the dotted lines on a SELECT/OPTION dropdown control in Firefox? 【发布时间】：2011-06-22 06:06:34 【问题描述】：

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

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

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

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

所以我认为这些适用于选择/选项元素，但它们不起作用：

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;

【问题讨论】：

Remove outline from select box in FF的可能重复 【参考方案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;

【讨论】：

如果你正在使用 Bootstrap 或者你的输入有任何过渡，不要忘记添加transition: color 0ms;，否则你会看到虚线淡出。【参考方案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();
);

【讨论】：

它在另一个平台上 2 年后不起作用（我当时在 WinXP 和最近的 FF 版本上尝试过），是吗？我认为这对黑客来说是可以的......无论如何，感谢您提供信息。【参考方案3】：

https://***.com/a/18853002/728855 上的解决方案似乎运行良好。

简而言之：

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

#000 是您的文本颜色。

【讨论】：

这在构建可重用组件时不起作用 - 您无法知道那里的文本颜色。它必须被继承，并且因为您设置了color，所以不能使用currentColor 属性。【参考方案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);

【讨论】：

【参考方案5】：