【问题标题】:Remove outline from select box in FF从FF中的选择框中删除轮廓
【发布时间】:2011-04-15 23:08:21
【问题描述】:

是否可以删除选择元素中所选项目周围的虚线?

我尝试在 CSS 中添加 outline 属性,但没有成功,至少在 FF 中没有。

<style>
   select { outline:none; }
</style>

更新
在继续删除大纲之前,请阅读此内容。
http://www.outlinenone.com/

【问题讨论】:

  • 三个月前,我搜索了相同的内容,但使用了单选按钮。我发现了五六种不同的解决方案,但没有任何效果。所以我怀疑你不能这样做。我希望我错了。
  • 恐怕事实也是如此,但仍然希望被证明是错误的:D
  • 在 Mozilla 工作的人是否真的认为那条愚蠢的虚线看起来不错?为什么这甚至是我们必须删除的东西?
  • 为了记录,这里没有一个答案可以解决它。 :P

标签: html css firefox xhtml


【解决方案1】:

一般来说,表单控件的样式不可能达到那种精确度。据我所知,没有浏览器支持所有控件中的合理范围的属性。这就是为什么有大量 JavaScript 库使用图像和其他 HTML 元素“伪造”表单控件并使用代码模拟其原始功能的原因:

http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

...

【讨论】:

  • 谢谢,我想我必须“制作自己的”选择列表来完成此操作。太糟糕了,表单控件在不同浏览器中并不统一。
  • @Martin:这与文件上传控件的不灵活相比毫无意义,在大多数浏览器中根本无法设置样式。 ;)
【解决方案2】:

尝试以下方法之一:

a:active {
 outline: none;
 -moz-outline: none;
}

a {
-moz-user-focus: none;
}

Reference

【讨论】:

  • 感谢您的努力,但不幸的是它没有奏效。也许它适用于 a 元素,但它不适用于 select 元素。
【解决方案3】:

&lt;select onchange="this.blur();"&gt;

如果你使用它,边框会一直保持,直到你从列表中选择一个项目。

【讨论】:

  • 很遗憾,此解决方案不遵守可访问性和可用性准则。除了盲人用户的 TTS 界面外,它还不允许键盘导航。重点元素应该看起来与其他元素不同,当前问题的问题是 Firefox 不允许您决定如何。
【解决方案4】:

我找到了一个解决方案,但它是所有黑客之母,希望它可以作为其他更强大解决方案的起点。缺点(在我看来太大了)是任何不支持text-shadow 但支持rgba(IE 9)的浏览器都不会呈现文本,除非您使用诸如 Modernizr 之类的库(未经测试,只是一个理论)。

Firefox 使用文本颜色来确定虚线边框的颜色。所以说如果你这样做......

select {
  color: rgba(0,0,0,0);
}

Firefox 将使虚线边框透明。当然,您的文本也将是透明的!所以我们必须以某种方式显示文本。 text-shadow 来救援:

select {
  color: rgba(0,0,0,0);
  text-shadow: 0 0 0 #000;
}

我们放置了一个没有偏移和模糊的文本阴影,以便替换文本。当然,旧版浏览器对此一无所知,因此我们必须为颜色提供后备:

select {
  color: #000;
  color: rgba(0,0,0,0);
  text-shadow: 0 0 0 #000;
}

这是 IE9 发挥作用的时候:它支持 rgba 但不支持 text-shadow,所以你会得到一个明显空的选择框。通过text-shadow 检测获取您的 Modernizr 版本并执行...

.no-textshadow select {
  color: #000;
}

享受吧。

【讨论】:

  • 谢谢老哥,我会尽快试一试:)
  • 唯一有效的解决方案(使用 FF 20)。恭喜!
  • 这应该照顾每个 FF,而且只有 FF:@-moz-document url-prefix() { ::-moz-focus-inner {border: none} select:-moz-focusring { color: transparent; text-shadow: 0px 0px 0px #000; } }
  • 会影响chrome等浏览器的css吗?
【解决方案5】:

嗯,Duopixel’s answer 非常完美。如果我们更进一步,我们可以让它防弹。

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

仅对 Firefox 有效,所选选项周围难看的虚线轮廓消失了。

【讨论】:

  • 有趣的是,这个解决方案并不像 Duopixel 的答案那样万无一失。如果您在选择框上使用过渡效果(即 -moz-transition),则虚线框将在过渡期间出现,然后消失。因此,即如果您指定“-moz-transition: all 0.5s ease;”,您将在此解决方案中看到组合框半秒钟,而在 Duopixel 的答案中您根本看不到它。您可以通过将整个 select 元素设置为具有透明颜色属性来解决此问题,但是当框没有焦点时,您将根本看不到任何文本。
  • 编辑:上面应该说,“......你会看到虚线框半秒钟用这个解决方案......”。我不能再编辑评论了。无论如何,'颜色:rgba(0,0,0,0);'属性是修复过渡的东西,它必须在选择元素中; '-moz-focusring' 不行。同样有趣的是,由于某种原因,我在使用 Duopixel 的解决方案时在 IE9 和 Chrome 中都没有任何问题,所以他最后与 Modernizr 谈论的东西对我来说完全没有必要。
  • 当然如果你指定一个过渡它就会出现。在过渡中使用all 就像用加特林机枪在飞行中射击。
  • 这个或 Duopixel 的解决方案在 Mac Mavericks 的 FF 33.0.3 中不起作用。不是虚线轮廓,而是蓝色模糊轮廓。
  • 这会破坏禁用选项上的浏览器样式 - 一旦选中,它们就会变成黑色,而不是它们应该是灰色的文本。
【解决方案6】:

解决办法来了

:focus {outline:none;}
::-moz-focus-inner {border:0;}

【讨论】:

  • 经过测试。不工作。 Firefox 可以识别这个属性,但它似乎没有做任何事情。尝试将其设置为10px solid red,但我找不到它的显示位置。
  • 当所有其他投票较高的答案都没有时,这实际上对我有用。
【解决方案7】:

这将针对所有 Firefox 版本

@-moz-document url-prefix() { 
    select {
       color: transparent !important;
       text-shadow: 0 0 0 #000 !important;
    }
}

如果您打算让大纲出现在您网站上使用相同样式表的其他页面上,您可能需要删除 !important。

【讨论】:

  • 这应该是选择的答案
【解决方案8】:

这里是解决 Firefox 选择框样式问题的协作解决方案。将此 CSS 选择器用作您通常的 CSS 重置的一部分。

类会根据问题删除轮廓,但也会删除任何背景图像(因为我通常使用自定义下拉箭头,而目前无法删除 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;
    }
}

【讨论】:

  • 是否仍然使用这种方法定义选项文本颜色?
  • 实际上,您可以通过将供应商特定属性 -moz-appearance 设置为 none 来删除 SELECT 后台使用的 Firefox 箭头。
  • 其他答案缺少重要的select::-moz-focus-inner 选择器,从而降低了它们的效率。这就是为什么这个得到我的⬆。
  • select:-moz-focusring 以及 color: transparenttext-shadow: 0 0 0 #000 删除了 Firefox v63 中令人讨厌的焦点边框
  • 注意:url-prefix()。 fxsitecompat.dev/en-CA/docs/2018/…阅读链接我不清楚他们是否要逐步淘汰它。但请注意。
【解决方案9】:
    input[type='range']::-moz-focus-outer {
    border: 0;
    outline: none !important;
    }

工作 100%

【讨论】:

    【解决方案10】:

    这将从select 元素和outline 中移除焦点:

    $("select").click(function(){
        $(this).blur();
    });
    

    虽然这在其他浏览器上并非没有缺点。您需要检查用户正在使用的浏览器:

    if (FIREFOX) {
        //implement the code
    }
    

    【讨论】:

    • 请说明您的代码 sn-p 除了提供代码 sn-p 之外还做了什么。
    • if (FIREFOX) { //implement the code } BAHAHAHA 谢谢你的笑声
    【解决方案11】:

    从 Firefox 所有可选标签中删除轮廓/虚线边框。

    将这行代码放在你的样式表中:

    *:focus{outline:none !important;}   
    

    【讨论】:

      【解决方案12】:

      在 CSS 中将 border-style: none 添加到您的选择中。

      select {
      border-style: none; }
      

      【讨论】:

        【解决方案13】:

        步骤 1) 添加 HTML: 添加您选择的选择选项并添加属性:contenteditable="true"

        第 2 步)添加 CSS: 使用 [attribute] 选择器选择所有内容可编辑的元素,并使用 outline 属性移除边框:

        [contenteditable] {
          outline: 0px solid transparent;
        }
        select {
          border: none;
        }
        <select contenteditable="true">
          <option value="option1">Option 1</option>
          <option value="option2">Option 2</option>
          <option value="option3">Option 3</option>
        </select>

        【讨论】:

          【解决方案14】:
          select:focus {
            box-shadow: none;
          }
          

          在选择/聚焦时移除选择框的轮廓。

          【讨论】:

            【解决方案15】:
            猜你喜欢
            • 2020-08-04
            • 2020-06-14
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 2021-01-11
            • 2020-06-17
            • 2017-10-15
            相关资源
            最近更新 更多