无法从 Firefox 选择下拉菜单中删除轮廓/虚线边框 [重复]

Posted 2023-03-05

【中文标题】无法从 Firefox 选择下拉菜单中删除轮廓/虚线边框 [重复]

【英文标题】：Cannot remove outline/dotted border from Firefox select drop down [duplicate]

【发布时间】：2013-10-27 09:17:21

【问题描述】：

我有一个向下的样式，但是在 Firefox 中单击虚线边框时无法删除它。我用过outline: none，但还是不行。有什么想法吗？

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：

<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>

请看这个jsFiddle。

【问题讨论】：

关于您编写​​的代码问题的问题必须描述具体问题 - 并包括有效的代码来重现它 - 在问题本身中。

有效。清除浏览器缓存。

在 Chrome 中看起来不错。 Firefox 显示“选择此”和下拉菜单本身之间存在差距。我在公司的计算机上并坚持使用 IE8，所以 Fiddler 甚至没有出现在 IE 中。大声笑！

道歉@FreshPrinceOfSO，我现在添加了代码。

@NathanLee，我已经清除了缓存，但我仍然看到虚线边框

【参考方案1】：

这将对您有所帮助。将它放在样式表的顶部。

/**
* 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;

【讨论】：

问题中提到的Firefox select drop down 怎么样？

它适用于我的引导选择器。谢谢

【参考方案2】：

在这里找到我的答案：https://***.com/a/18853002/1261316

它没有设置为正确答案，但它对我来说非常有效：

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

select 
    background: transparent;

【讨论】：

(!) 这也使列表项的颜色透明

tx，对我有用（选项在 FF 29 OSX 中可见）

Grate，做它应该做的，谢谢。 FF ubuntu 14 lts

如果你正在使用 Bootstrap 或者你的输入有任何过渡，不要忘记添加transition: color 0ms;，否则你会在你专注于选择的那一刻看到虚线淡出盒子！

@Simon：你是对的，确实如此。我发现避免这种情况的最佳方法是使用两个附加规则：option text-shadow: none 撤消阴影效果，option:not(:checked) color: #000; - 或任何正常的文本颜色 - 重置颜色。 未选中，因为所选选项应从用户代理样式表中获取其颜色和背景。