使用ngb-Bootstrap开发轮播组件：点击边框禁用问题求助

首先，你遇到的这个边框是浏览器默认的焦点轮廓样式，通常是为了无障碍访问设计的，但如果你的需求是移除它，需要针对性地覆盖轮播组件内交互元素的focus状态样式——你之前尝试的active状态其实和这个焦点边框无关，所以没起作用。

针对你的现有SCSS代码，你可以补充以下样式来彻底移除这些焦点边框：

.imageCarousel {
  max-height: 500px;
  text-align: center;
  color: $color2;
  user-select: none;

  img {
    max-width: 80%;
    max-height: 280px;
  }

  .carousel-indicators {
    color: $color2;
  }

  // 移除轮播前后控制按钮的焦点边框
  .carousel-control-prev,
  .carousel-control-next {
    &:focus,
    &:active {
      outline: none !important;
      box-shadow: none !important;
    }
  }

  // 移除轮播指示器按钮的焦点边框
  .carousel-indicators button {
    &:focus,
    &:active {
      outline: none !important;
      box-shadow: none !important;
    }
  }

  // 移除轮播内容容器的焦点边框（点击轮播区域本身时触发）
  .carousel-inner {
    &:focus {
      outline: none !important;
    }
  }
}

补充说明 #

这个点击后出现的边框是元素进入**focus状态**时的浏览器默认样式，当用户点击或通过键盘导航到轮播的交互元素时，浏览器会自动添加这个轮廓来提示当前焦点位置。你之前尝试的active状态是元素被激活（比如按钮按下瞬间）的样式，和焦点轮廓不是一回事，所以没效果。

无障碍访问提示 #

虽然移除焦点边框能满足视觉需求，但会影响依赖键盘导航的用户体验。如果一定要移除，建议同时添加自定义的焦点样式（比如轻微的阴影变化）来替代默认轮廓，保证页面的无障碍访问性。

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