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

Question

我有一个包含 Bootstrap 轮播的 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;
  }

重现步骤：

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

如何才能成功覆盖大纲？

Answer 1

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

试试这个：

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

Answer 2

在遇到另一个堆栈 post 后，我能够解决这个问题。这太难找了！

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

.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;
}

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

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

Adding focus and override on CSS outline causes outline to disappear

html

css

jquery

outline

twitter-bootstrap-3