Scss - 单击时禁用边框

Posted 2023-03-06

【中文标题】Scss - 单击时禁用边框

【英文标题】：Scss - disable border on click

【发布时间】：2018-09-01 03:02:13

【问题描述】：

我正在使用 ngb-Bootstrap 创建轮播，但我遇到了边框问题。当我单击轮播按钮或轮播中的任何地方时，我都会有这样的感觉：

我不想在外面显示这个边框。我试图删除活动或焦点上的边框，但没有任何效果。

.imageCarousel 
        max-height: 500px;
        text-align: center;
        color: $color2;

        user-select: none;


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

        
        .carousel-indicators 
            color: $color2;
        
    

【问题讨论】：

尝试在按钮上添加outline: none;。 Source

outline: none

如果您不想要焦点状态，请不要使用可聚焦的元素。这是假设您根本不希望用户能够与您的滑块进行交互……

【参考方案1】：

*:focus 
    outline: none;

或者您可以更具体地使用 CSS 类（例如 .imageCarousel）。

【讨论】：

不好的建议。在应该有轮廓的元素上禁用轮廓对你的用户来说是个大问题。可访问性，这是一回事。为什么不使用没有焦点状态的元素？

@SethWarburton 要在焦点上不显示任何内容，这是个坏主意，这是真的。 （如果开发人员为 :focus 编写自定义 CSS，没关系。）但这就是问题的答案。

您使用通用选择器会破坏每个元素的焦点状态；带枪参加刀战。是的，它确实解决了 OP 的问题，但不是以一种特别负责任的方式。