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

关键词：

【中文标题】无法从 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; - 或任何正常的文本颜色 - 重置颜色。 未选中，因为所选选项应从用户代理样式表中获取其颜色和背景。

无法从 Firefox 3.5.3 中的 a:active 中删除轮廓

】无法从Firefox3.5.3中的a:active中删除轮廓【英文标题】：Can\'tremoveoutlinefroma:activeinFirefox3.5.3【发布时间】：2010-12-1110:33:54【问题描述】：我试图阻止Firefox在单击或关注链接时添加大纲（a:active）。我不想去掉a:focus上的轮廓，因为... 查看详情

从 Firefox 中的范围输入元素中删除虚线轮廓

】从Firefox中的范围输入元素中删除虚线轮廓【英文标题】：RemovedottedoutlinefromrangeinputelementinFirefox【发布时间】：2013-09-1814:19:00【问题描述】：Firefox，从版本23开始，原生支持<inputtype="range">元素，但我不知道如... 查看详情

无法从引导程序的下拉菜单中选择项目

】无法从引导程序的下拉菜单中选择项目【英文标题】：Notabletoselectitemfromdropdownmenuofbootstrap【发布时间】：2022-01-1808:27:00【问题描述】：我使用bootstrap创建了一个下拉菜单，但无法从下面的代码中选择项目varaos=\'\';$(\'.dropdown-ite... 查看详情

如何从 jQuery Chosen 选择下拉菜单中隐藏或删除选项

】如何从jQueryChosen选择下拉菜单中隐藏或删除选项【英文标题】：HowtohideorremoveoptionsfromjQueryChosenselectdropdown【发布时间】：2014-10-2004:41:26【问题描述】：我想从使用Chosen插件创建的下拉菜单中隐藏某些元素。我已经尝试删除它：... 查看详情

如何从表格的下拉菜单中删除先前选择的选项？

】如何从表格的下拉菜单中删除先前选择的选项？【英文标题】：Howtoremovethepreviouslyselectedoptionfromadrop-downmenuinatable?【发布时间】：2019-11-1504:45:31【问题描述】：我正在Angular7上制作一个项目。它有一个带有下拉列表的表格。下... 查看详情

无法从 Selenium 和 Python 的下拉菜单中选择

】无法从Selenium和Python的下拉菜单中选择【英文标题】：Can\'tselectfromadropdownmenuwithSeleniumandPython【发布时间】：2020-12-1104:20:06【问题描述】：我真的很难从我要抓取的网站上的下拉菜单中选择一个项目。HTML的代码如下所示：<sel... 查看详情

UI Bootstrap 下拉菜单在 Firefox 中无法使用 / Text Angular ...

】UIBootstrap下拉菜单在Firefox中无法使用/TextAngular...【英文标题】：UIBootstrapDropdownNotWorkingW/TextAngular...inFirefox【发布时间】：2015-10-0413:40:12【问题描述】：我认为我的问题在于“显示”中的下拉按钮。在Chrome中，下拉菜单按预期工... 查看详情

IE & Firefox - 自定义下拉菜单无法移除原生箭头

】IE&Firefox-自定义下拉菜单无法移除原生箭头【英文标题】：IE&Firefox-customdropdowncouldnotremovenativearrows【发布时间】：2013-08-2816:48:25【问题描述】：我正在尝试创建一个自定义下拉控件，我需要从本机控件中隐藏箭头。我正... 查看详情

无法从反应选择下拉机器人框架中选择选项

】无法从反应选择下拉机器人框架中选择选项【英文标题】：Unabletoselectoptionfromreact-selectdropdownRobotframework【发布时间】：2021-12-1314:52:05【问题描述】：有一个名为“sampleType”的下拉菜单，其中有几个值“AB1、AB2、..AB6”。当我... 查看详情

删除已从另一个下拉菜单中选择的下拉值

】删除已从另一个下拉菜单中选择的下拉值【英文标题】：Removeadropdownvaluethathasbeenselectedfromanotherdropdownmenu【发布时间】：2014-06-1215:47:29【问题描述】：我在网上搜索了一段时间，但仍然找不到答案，我的网站上有三个下拉菜单... 查看详情

无法在 Python 应用程序中选择下拉菜单

】无法在Python应用程序中选择下拉菜单【英文标题】：Can\'tselectdrop-downmenuinPythonapp【发布时间】：2020-02-1914:52:51【问题描述】：我有一个从网站上抓取值的脚本，它带有一个下拉悬停菜单，需要将父菜单悬停在其中并选择一个下... 查看详情

选择下拉菜单后，动态输入字段无法正确显示

】选择下拉菜单后，动态输入字段无法正确显示【英文标题】：Dynamicinputfieldsarenotdisplayingproperafterselectingthedropdown【发布时间】：2019-06-3013:24:42【问题描述】：我有一个添加更多按钮。一旦用户点击它，它就会显示动态的选择下... 查看详情

选择固定宽度的下拉菜单，在 IE 中截断内容

...择中的某些项目需要超过145px的指定宽度才能完全显示。Firefox行为：点击选择显示下拉元素列表调整为最长元素的宽度。IE6和IE7行为：单击选择会显示限制为145像素宽度的下拉元素列表，因此无法读取较长的元素 查看详情

从 Angular 的下拉列表中删除选定的选项

...309:06:53【问题描述】：我有一个按钮，单击时会添加更多选择下拉菜单。所以我想删除这些选择框中已经选择的选项以防止重复。以下代码用于下拉选择：<selectclass="selectform-control"formControlName="environ 查看详情

jquery依赖下拉菜单选择

...2019-04-2307:17:17【问题描述】：对不起，我的英语很差。我无法从jquery相关的下拉菜单中选择选项值。我有三个下拉菜单第一个类别，第二个是子类别，第三个是子子类别。在进入和更新模式下，默认情况下，第2和第3菜单始终处... 查看详情

无法在python应用程序中选择下拉菜单(代码片段)

我有一个脚本，可从网站上抓取值，并具有一个下拉悬停菜单，需要将父菜单悬停在该菜单上，并选择了一个下拉选项。直到几天前，它一直运行良好。但是现在随机失败。这是我当前的代码：defselect_dropdown():WebDriverWait(driver,10)... 查看详情

css删除firefox中链接的虚线轮廓(代码片段)

查看详情

如何从Firefox中的选择中删除向下图标[重复]

】如何从Firefox中的选择中删除向下图标[重复]【英文标题】：HowtoremoveDowniconfromselectinfirefox[duplicate]【发布时间】：2014-10-1813:06:57【问题描述】：大家好，任何人都知道如何在全屏Firefox中从选择中删除右上角的图标。谢谢【问题... 查看详情