谷歌浏览器在选择文本时出现边框[关闭]答案

【问题标题】：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;
}

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

【讨论】：