Html 从 FF 中的选择框中删除轮廓
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3773430/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Remove outline from select box in FF
提问by Martin
Is it possible to remove the dotted line surrounding a selected item in a select element?
是否可以删除选择元素中所选项目周围的虚线？
I have tried to add the outlineproperty in CSS but it did not work, at least not in FF.
我曾尝试outline在 CSS 中添加该属性，但它不起作用，至少在 FF 中不起作用。
<style>
select { outline:none; }
</style>
Update
Before you go ahead and remove the outline, please read this.
http://www.outlinenone.com/
更新
在您继续删除大纲之前，请阅读此内容。
http://www.outlinenone.com/
采纳答案by methodofaction
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-shadowbut supports rgba(IE 9) won't render the text unless you use a library such as Modernizr (not tested, just a theory).
我找到了一个解决方案，但它是所有黑客之母，希望它可以作为其他更强大解决方案的起点。缺点（在我看来太大了）是任何不支持text-shadow但支持rgba（IE 9）的浏览器都不会呈现文本，除非您使用诸如 Modernizr 之类的库（未经测试，只是一个理论）。
Firefox uses the text color to determine the color of the dotted border. So say if you do...
Firefox 使用文本颜色来确定虚线边框的颜色。所以说如果你...
select {
color: rgba(0,0,0,0);
}
Firefox will render the dotted border transparent. But of course your text will be transparent too! So we must somehow display the text. text-shadowcomes to the rescue:
Firefox 将使虚线边框透明。但当然你的文字也会是透明的！所以我们必须以某种方式显示文本。text-shadow来救援：
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;
}
This is when IE9 comes into play: it supports rgbabut not text-shadow, so you will get an apparently empty select box. Get your version of Modernizr with text-shadowdetection and do...
这就是 IE9 发挥作用的时候：它支持rgba但不支持text-shadow，所以你会得到一个明显为空的选择框。通过text-shadow检测获取您的 Modernizr 版本并执行...
.no-textshadow select {
color: #000;
}
Enjoy.
享受。
回答by Fleshgrinder
Well, Duopixel's answeris plain perfect. If we go a step further we can make it bulletproof.
好吧，Duopixel 的回答非常完美。如果我们更进一步，我们可以使它防弹。
select:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #000;
}
There you go, only valid for Firefox and the ugly dotted outline around the selected option is gone.
好了，仅对 Firefox 有效，所选选项周围的丑陋虚线轮廓消失了。
回答by Wayne Dunkley
Here is a collaboration of solutions to fix styling issues with Firefox select boxes. Use this CSS selector as part of your usual CSS reset.
这是修复 Firefox 选择框样式问题的解决方案的协作。将此 CSS 选择器用作您通常的 CSS 重置的一部分。
Class removes outline as per question but also removes any background image (as I usually use a custom dropdown arrow and Firefoxes system dropdown arrow can't currently be removed). If using background image for anything other than dropdown image, simply remove line background-image: none !important;
类根据问题删除轮廓，但也会删除任何背景图像（因为我通常使用自定义下拉箭头，而目前无法删除 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;
}
}
回答by álvaro González
In general, form controls are impossible to style to that degree of accuracy. There's no browser I'm aware of that supports a sensible range of properties in all controls. That's the reason why there're a gazillion JavaScript libraries that "fake" form controls with images and other HTML elements and emulate their original functionality with code:
一般来说，表单控件不可能达到那种程度的精确度。我知道没有浏览器支持所有控件中合理的属性范围。这就是为什么有无数 JavaScript 库使用图像和其他 HTML 元素“伪造”表单控件并用代码模拟它们的原始功能的原因：
http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/
http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/
...
...
回答by Kyzer
This will target all firefox versions
这将针对所有 Firefox 版本
@-moz-document url-prefix() {
select {
color: transparent !important;
text-shadow: 0 0 0 #000 !important;
}
}
You might want to remove the !important, if you plan to have the outline appear on other pages across your site that use the same stylesheet.
如果您打算将大纲显示在站点上使用相同样式表的其他页面上，您可能需要删除 !important。
回答by malitta
<select onchange="this.blur();">
<select onchange="this.blur();">
If you use this the border stays until you select an item from the list.
如果您使用它，边框会一直保持，直到您从列表中选择一个项目。
回答by Catfish
回答by Faizan
Here comes the solution
解决方案来了
:focus {outline:none;}
::-moz-focus-inner {border:0;}
回答by Hasnain Mehmood
Remove outline/dotted border from Firefox All Selectable Tags.
从 Firefox All Selectable Tags 中移除轮廓/虚线边框。
Put this line of code in your style sheet:
把这行代码放在你的样式表中：
*:focus{outline:none !important;}
回答by user2577904
input[type='range']::-moz-focus-outer {
border: 0;
outline: none !important;
}
working 100%
工作 100%
