Html 无法从 Firefox 选择下拉菜单中删除轮廓/虚线边框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19451183/
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
Cannot remove outline/dotted border from Firefox select drop down
提问by shrewdbeans
I have a styled down down, but I cannot remove the dotted border when it is clicked in Firefox. I've used outline: nonebut it still doesn't work. Any ideas?
我有一个向下的样式，但是在Firefox 中单击时无法删除虚线边框。我用过，outline: none但还是不行。有任何想法吗？
CSS:
CSS：
.styled-select {
background: lightblue;
font-size: 20px;
height: 50px;
line-height: 50px;
position: relative;
border: 0 none !important;
outline: 1px none !important;
}
.styled-select select {
background: transparent;
border: 0;
border-radius: 0;
height: 50px;
line-height: 50px;
padding-top: 0; padding-bottom: 0;
width: 100%;
-webkit-appearance: none;
text-indent: 0.01px;
text-overflow: '';
border: 0 none !important;
outline: 1px none !important;
}
HTML:
HTML：
<div class="styled-select">
<select id="select">
<option value="0">Option one</option>
<option value="1">Another option</option>
<option value="2">Select this</option>
<option value="3">Something good</option>
<option value="4">Something bad</option>
</select>
</div>
Please see this jsFiddle.
请参阅此jsFiddle。
回答by shrewdbeans
Found my answer here: https://stackoverflow.com/a/18853002/1261316
在这里找到我的答案：https: //stackoverflow.com/a/18853002/1261316
It wasn't set as the correct answer, but it worked perfectly for me:
它没有设置为正确答案，但它对我来说非常有效：
select:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #000;
}
select {
background: transparent;
}
回答by shrewdbeans
This will help you. Place it on top of your style sheet.
这会帮助你。将它放在样式表的顶部。
/**
* Address `outline` inconsistency between Chrome and other browsers.
*/
a:focus {
outline:0;
}
/**
* Improve readability when focused and also mouse hovered in all browsers.
*/
a:active,
a:hover {
outline: 0;
}
