在 CSS 轮廓上添加焦点和覆盖会导致轮廓消失答案

【问题标题】：Adding focus and override on CSS outline causes outline to disappear在 CSS 轮廓上添加焦点和覆盖会导致轮廓消失
【发布时间】：2017-10-25 21:03:08
【问题描述】：

我有一个包含 Bootstrap Carousel 的 Bootstrap 模式。我需要在轮播中处于活动状态的幻灯片才能获得焦点。我试图覆盖轮廓样式以使焦点更明显（尤其是在 Edge 中）。我可以成功聚焦（codepen 将只在第一张幻灯片上进行演示），如果我不覆盖轮廓，则可以在图像上看到默认的浏览器轮廓。但是，当我尝试覆盖轮廓时，它会完全消失。

代码笔： https://codepen.io/VVarPiglet/pen/QqegMd

HTML

  <div class="main">
<div class="button">
  <button class="modal-pop">Open Modal</button>
</div>
<div class="modal fade" id="my-modal" tabindex="-1" role="dialog" aria-labelledby="Modal" aria-hidden="true" data-hidden-by="user">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true" class="close-symbol">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div id="my-carousel" class="carousel slide" data-interval="false" data-wrap="false">
                    <div class="carousel-inner">
                      <div class="item card active" tabindex="1">
                        <img class="card-image" src="https://www.w3schools.com/css/img_fjords.jpg"/>
                      </div>
                      <div class="item card" tabindex="1">
                        <img class="card-image" src="https://upload.wikimedia.org/wikipedia/commons/5/5b/India_Gate_600x400.jpg"/>
                      </div>
                    </div>
                    <a class="left carousel-control" href="#my-carousel" role="button" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                        <span class="sr-only">Previous Label</span>
                    </a>
                    <a class="right carousel-control" href="#my-carousel" role="button" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                        <span class="sr-only">Next Label</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

  .main{
    width: 100%;
   }
  .button{
    margin: 20px auto;
    text-align: center;
   }

  #my-modal{
    width 500px;
  }

  .card-image{
    width: 100%
  }

  .modal-body{
    padding: 0;
  }

  /** comment the below out to see the outline that automatically takes place. It is a little hard to see, but it is a 1px solid blue outline */
  .carousel-inner .item.active:focus
  {
     outline: #00bfff solid 5px;
  }

重现步骤：

导航到 codepen。
按下按钮打开模态。
请注意，没有描述焦点的轮廓。
打开 CSS 编辑器。
向下滚动到末尾并删除或注释掉大纲覆盖。
保存。
按下按钮打开模式。
请注意，图像具有描述焦点的轮廓。

我怎样才能成功地覆盖大纲？

【问题讨论】：

您好，您希望活动幻灯片“获得焦点”是什么意思？你想让它有轮廓还是其他效果？
是的，两个焦点，我希望轮廓更粗。我发现隐藏在 carousel-inner 上的溢出隐藏了轮廓。我应该能够将其更改为溢出：可见而没有任何问题。然而，为什么浏览器会显示它的标准轮廓仍然是个谜，但是当我尝试覆盖它时它就消失了。
实际上溢出：可见破坏了我在实际项目中的布局，所以我无法使用它。 :(

标签： jquery html css twitter-bootstrap-3 outline

【解决方案1】：

据我所知，如果您的目标是 .active 项目，我不确定您是否需要 :focus。 overflow: hidden 也确实隐藏了轮廓。

试试这个：

.carousel-inner .item.active {
  border: #00bfff solid 5px;
}

【讨论】：

嘿，劳拉，感谢您查看此内容。我需要使用大纲的原因是因为它不影响布局。如果您注意到边框是叠层的，则卡片内部的内容会缩小。还有一个关于可访问性的问题。当阅读器在内容上时，将有一个双粗边框（一个来自外部的阅读器，一个来自内部的内容。
我给了你一个赞成票，因为在合适的情况下这是一个很好的解决方案。
啊，是的，我明白了，这是有道理的。谢谢，很高兴您找到了解决方案！

【解决方案2】：

在遇到其他堆栈帖子后，我能够解决此问题。这太难找了！ styling the outline border with outer overflow set to hidden

我选择的解决方案是该页面上两个建议的组合：

.carousel-inner .item.active:focus
{
    outline: 2px solid #00bfff;
    outline-offset: -2px;
}

/* FIX FOR EDGE: When Edge impliments outline-offset will want to delete 
this block. But until then this is the best method
to allow a noticeable outline for accessibility
*/
.carousel-inner .item.active:focus::after
{
    content: "";
    height: 99.19%;
    outline: 2px solid #00bfff;
    position: absolute;
    top: 2px;
    left: 2px;
    width: 99.19%;
    z-index: 99999;
}

我也用这个解决方案更新了 codepen： https://codepen.io/VVarPiglet/pen/QqegMd

【讨论】：