如何删除Firefox中的SELECT / OPTION下拉控件上的虚线？ [英] How can I remove the dotted lines on a SELECT/OPTION dropdown control in Firefox?

问题描述

在 Chrome 和其他浏览器中，我的下拉菜单显示为 ： /i.stack.imgur.com/OihyJ.pngalt =

然而，在 Firefox 中，不需要的虚线行：

按钮和输入元素的不需要的Firefox虚线删除了这些CSS语句：

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

所以我认为这些可以用于select / option元素，但是它们不会：

  select ::  -  moz-focus-inner {border：0; } 
选项::  -  moz-focus-inner {border：0; } 
  

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

附录

这些都不起作用：

  select ::  -  moz-focus-inner {border：0;大纲：0} 
选项::  -  moz-focus-inner {border：0;大纲：0} 
  

也不是这些：

  select {outline：0; } 
选项{outline：0; } 
  

也没有这些：

  select {outline：none; } 
选项{outline：none; James Broad的答案是近乎完美的，但是阴影文本的选项项目看起来很丑。这是完美的作品：
 
 pre $  select：-moz-focusring {
 color：transparent; 
 text-shadow：0 0 0＃000; / *您的正常文字颜色在这里* / 
} 
选择：-moz-focusring * {
 color：＃000; / *您的正常文字颜色在这里* / 
 text-shadow：none; 
} 
  




In Chrome and other browsers my dropdown looks fine:

However, in Firefox it has unwanted dotted lines:

I have successfully removed the unwanted Firefox dotted lines for buttons and input elements with these CSS statements:

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

so I thought these would work for the select/option elements, but they don't:

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

How can I remove the dotted lines in this dropdown so that it appears as in Chrome and other browsers?

Addendum

These don't work either:

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

nor these:

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

nor these:

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

解决方案

James Broad's answer is nearly perfect, but the "shadow-only" text for the option items looks ugly. This is what works perfectly for me:

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;
}

这篇关于如何删除Firefox中的SELECT / OPTION下拉控件上的虚线？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！