从FF中的选择框中删除轮廓

Question

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

我试图outline在CSS中添加属性,但它不起作用,至少不在FF中.

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

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

Answer 1

好吧,Duopixel的答案很简单.如果我们更进一步,我们可以使它具有防弹性.

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

你去,只对Firefox有效,所选选项周围的丑陋虚线轮廓消失了.

Answer 2

我找到了一个解决方案,但它是所有黑客的母亲,希望它将成为其他更强大的解决方案的起点.缺点(在我看来过大)是不支持任何浏览器text-shadow,但支持rgba除非你使用一个库,如Modernizr的(IE 9)将不渲染文本(未测试,只是一种理论).

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但不支持文本阴影,所以你会得到一个看似空的选择框.获取您的Modernizr版本text-shadow并进行检测并执行...

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

请享用.

Answer 3

这是一个解决方案的合作,用于修复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;
    }
}

Answer 4

通常,表单控件不可能达到这种准确度.没有我知道的浏览器支持所有控件中的合理范围的属性.这就是为什么有大量的JavaScript库"伪造"带有图像和其他HTML元素的表单控件并使用代码模拟其原始功能的原因:

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

...

Answer 5

这将针对所有firefox版本

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

如果您计划在网站上使用相同样式表的其他页面上显示大纲,则可能需要删除!important.