Question

我有一个包含Bootstrap Carousel的Bootstrap模式。我需要在Carousel中激活的幻灯片才能获得焦点。我试图覆盖轮廓样式以使焦点更加明显（特别是在Edge中）。我可以成功聚焦（codepen只会在第一张幻灯片上执行此操作以进行演示），如果我不覆盖大纲，则可以看到图像上的默认浏览器大纲。但是，当我试图覆盖轮廓时，它会完全消失。

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编辑器。
向下滚动到最后并删除或注释掉轮廓覆盖。
保存。
按按钮打开模态。
请注意，图像具有描述焦点的轮廓。

如何成功覆盖大纲？

Answer 1

根据我所看到的情况，如果您定位:focus项，我不确定您是否需要.active。 overflow: hidden确实隐藏了轮廓。

请改为尝试：

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

Answer 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

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

2 个答案: