在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但它不工作，至少不是在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>

更新删除大纲，请阅读此处。
$ $ b $ http://www.outlinenone.com/

Update
Before you go ahead and remove the outline, please read this.
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 检测并获取您的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屋！