Bootstrap popover信息按钮点击态边框无法隐藏如何解决

你之前改border、outline没生效，是因为你看到的点击后出现的边框根本不是元素默认状态的border，是Bootstrap框架给.btn类预设的焦点态样式——点击元素触发:focus、:active伪类时，框架会自动给元素加outline和外发光的box-shadow，你只改了默认状态的属性，根本没覆盖伪类下的预设规则，自然不生效。

在页面里加一段CSS，把这个按钮对应焦点、激活状态下的高亮样式全部重置即可：

#popoverData:focus, #popoverData:active {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

加了!important是为了确保样式优先级高于Bootstrap的默认规则，避免样式加载顺序问题导致覆盖失败。

修改后的完整可运行代码如下：

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
/* 新增这段覆盖样式 */
#popoverData:focus, #popoverData:active {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}
</style>
</head>
<body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

  <div>
    <label for="download" style="float: left; margin-top: 6px">Content</label>
    <a id="popoverData" class="btn" href="#" data-content="My Content" 
    rel="popover" data-placement="bottom" data-trigger="hover" style="float: left; margin-left: -10px; margin-top: 0px; border: none;">&#x1F6C8;</a>
  </div>

  <script>
    $(document).ready(function(){
      $('#popoverData').popover();
    });
  </script>
</body>
</html>

• 所有交互类元素（按钮、链接、输入框）的点击态、焦点态样式都是挂在:focus、:active伪类下的，只改元素默认状态的属性没法影响这部分样式，这也是改样式不生效的常见原因。
• 如果你不需要这个信息按钮支持键盘Tab导航聚焦，也可以给标签加onfocus="this.blur()"让它点击后立刻失焦，同样不会出现焦点边框，但这种写法会破坏无障碍访问逻辑，非特殊场景不推荐用。

内容的提问来源于stack exchange，提问作者Vika