从FF的选择框中删除轮廓

是否可以删除选择元素中所选项目周围的虚线？

我试图outline在CSS中添加该属性，但是它不起作用，至少在FF中不起作用。

<style>
   select { outline:none; }
</style>

更新
在继续删除大纲之前，请阅读此内容。
http://www.outlinenone.com/

我找到了一个解决方案，但这是所有黑客之母，希望它可以作为其他更强大解决方案的起点。缺点（我认为太大）是，任何不支持text-shadow但支持rgba（IE 9）的浏览器都不会渲染文本，除非您使用诸如Modernizr之类的库（未经测试，只是一个理论）。

Firefox使用文本颜色来确定虚线边框的颜色。所以说如果你...

select {
  color: rgba(0,0,0,0);
}

Firefox将使虚线边框透明。但是当然您的文本也将是透明的！因此，我们必须以某种方式显示文本。text-shadow来救援：

select {
  color: rgba(0,0,0,0);
  text-shadow: 0 0 0 #000;
}

我们放置一个没有偏移且没有模糊的文本阴影，以便替换文本。当然，较旧的浏览器对此一无所知，因此我们必须提供颜色的备用：

select {
  color: #000;
  color: rgba(0,0,0,0);
  text-shadow: 0 0 0 #000;
}

这就是IE9发挥作用的时候：它支持rgba但不支持文本阴影，因此您将获得一个显然为空的选择框。通过text-shadow检测获取您的Modernizr版本并执行...

.no-textshadow select {
  color: #000;
}

请享用。

好吧，Duopixel的答案很完美。如果我们走得更远，我们可以使其防弹。

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

到此为止，仅对Firefox有效，并且所选选项周围的点点难看的轮廓消失了。

这是解决方案协作的解决方案，用于解决Firefox选择框的样式问题。使用此CSS选择器作为常规CSS重置的一部分。

类会根据问题删除大纲，但也会删除任何背景图片（因为我通常使用自定义下拉箭头，而Firefoxes系统下拉箭头目前无法删除）。如果将背景图像用于下拉图像以外的其他任何东西，只需删除行background-image: none !important;

@-moz-document url-prefix() {
    select, select:-moz-focusring, select::-moz-focus-inner {
       color: transparent !important;
       text-shadow: 0 0 0 #000 !important;
       background-image: none !important;
       border:0;
    }
}

这将针对所有Firefox版本

@-moz-document url-prefix() { 
    select {
       color: transparent !important;
       text-shadow: 0 0 0 #000 !important;
    }
}

如果您计划在网站上使用同一样式表的其他页面上显示大纲，则可能要删除！important。

通常，窗体控件无法以这种准确性进行样式设置。据我所知，没有一个浏览器在所有控件中都支持合理的属性范围。这就是为什么有大量的JavaScript库会使用图像和其他HTML元素“伪造”表单控件，并使用代码来模仿其原始功能：

http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

...

<select onchange="this.blur();">

如果使用此选项，边框会一直保留，直到您从列表中选择一个项目为止。

尝试以下方法之一：

a:active {
 outline: none;
 -moz-outline: none;
}

a {
-moz-user-focus: none;
}

参考

解决方案来了

:focus {outline:none;}
::-moz-focus-inner {border:0;}

从Firefox所有可选标签中删除轮廓/虚线边框。

将以下代码行放入样式表中：

*:focus{outline:none !important;}   

添加边框样式：在CSS中选择无边框样式。

select {
border-style: none; }

    input[type='range']::-moz-focus-outer {
    border: 0;
    outline: none !important;
    }

工作100％

这将从select元素和轮廓中移出焦点：

$("select").click(function(){
    $(this).blur();
});

尽管这在其他浏览器上并非没有缺点。您需要检查用户使用的浏览器：

if (FIREFOX) {
    //implement the code
}