从 FF 中的选择框中删除轮廓 [英] Remove outline from select box in FF

问题描述

是否可以删除 select 元素中选定项周围的虚线?

Is it possible to remove the dotted line surrounding a selected item in a select element?

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

I have tried to add the outline property in CSS but it did not work, at least not in FF.

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

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

推荐答案

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

I found a solution, but it is mother of all hacks, hopefully it will serve as a starting point for other more robust solutions. The downside (too big in my opinion) is that any browser that doesn't support text-shadow but supports rgba (IE 9) won't render the text unless you use a library such as Modernizr (not tested, just a theory).

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

Firefox uses the text color to determine the color of the dotted border. So say if you do...

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

Firefox 将使虚线边框透明.当然，您的文字也会是透明的！所以我们必须以某种方式显示文本.text-shadow 来拯救:

Firefox will render the dotted border transparent. But of course your text will be transparent too! So we must somehow display the text. text-shadow comes to the rescue:

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

我们放置了一个没有偏移和模糊的文本阴影，以便替换文本.当然，旧浏览器对此一无所知，因此我们必须为颜色提供后备:

We put a text shadow with no offset and no blur, so that replaces the text. Of course older browser don't understand anything of this, so we must provide a fallback for the color:

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

这是 IE9 发挥作用的时候:它支持 rgba 但不支持 text-shadow，所以你会得到一个明显为空的选择框.使用 text-shadow 检测获取您的 Modernizr 版本并执行...

This is when IE9 comes into play: it supports rgba but not text-shadow, so you will get an apparently empty select box. Get your version of Modernizr with text-shadow detection and do...

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

享受.

这篇关于从 FF 中的选择框中删除轮廓的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！