【问题标题】:google chrome appearing border when selecting text [closed]谷歌浏览器在选择文本时出现边框[关闭]
【发布时间】:2013-06-27 15:16:58
【问题描述】:

Demo

在上面的小提琴中没有背景或边框颜色 但是当我单击或选择文本边框时会出现在谷歌浏览器中。

标记

<div id="ja-component">
  <div id="fit-scroll" style="height: 505px; overflow: hidden; padding: 0px; width: 289px;" class="jspScrollable" tabindex="0">

  <p>some text</p>


  </div>
</div>

我该如何解决这个问题?

【问题讨论】:

  • 提示您输入代码是有原因的,而不仅仅是指向 jsfiddle 的链接。提示:这不是测试你的漏洞发现能力。

标签: html css google-chrome


【解决方案1】:

使用

*:focus {
    outline: none;
}

Demo

【讨论】:

  • 以无障碍的名义请不要这样做。仅使用键盘的用户需要能够看到他们的焦点在哪里。我建议逐个元素禁用轮廓,并确保用明显的焦点样式替换它。
【解决方案2】:

您需要添加“大纲:0;”作为“div#fit-scroll”样式。 我建议不要使用内联样式,但根据您的演示,您应该添加:

div id="fit-scroll" style="box-shadow:0; outline: 0; height: 505px; overflow: hidden; padding: 0px; width: 289px;" class="jspScrollable" tabindex="0">

Demo

【讨论】:

    【解决方案3】:

    Chrome 默认(通过用户代理样式表)在每个输入元素获得焦点时将黄色边框(实际上是一个轮廓)放在每个输入元素周围。 您可以通过将以下代码放入您的 css 来覆盖此默认值:

    *:focus {
        outline: none;
    }
    

    【讨论】:

      【解决方案4】:
      *:focus {
          outline: none;
      }
      

      它应该可以解决问题...

      【讨论】:

        猜你喜欢
        • 2011-04-21
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2021-10-16
        • 1970-01-01
        • 1970-01-01
        • 2014-11-29
        • 2011-01-06
        相关资源
        最近更新 更多