CSSのアウトラインにフォーカスとオーバーライドを追加するとアウトラインが消えます

Question

私はブートストラップの回転式を含むブートストラップモードを持っています。私は焦点を当てるためにカルーセルで活動しているスライドが必要です。私はアウトラインスタイルをオーバーライドしてフォーカスをより目立たせるようにしようとしています（特に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; 
    } 

再現手順：

1. codepenに移動します。
2. ボタンを押してモーダルを開きます。
3. フォーカスを記述する概要がないことに注意してください。
4. オープンCSSエディター。
5. 最後までスクロールし、アウトラインオーバーライドを削除またはコメントアウトします。
6. 保存します。
7. ボタンを押してモーダルを開きます。
8. イメージにはフォーカスを記述するアウトラインがあります。

アウトラインを正常にオーバーライドするにはどうすればよいですか？

Answer 1

は、私は、この他のスタックポスト渡って来た後、この問題を解決することができました。これは検索が非常に難しかった！ styling the outline border with outer overflow set to hidden

私は、そのページ上の2つの提案を組み合わせた選択したソリューション：

.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

Answer 2

.activeアイテムをターゲットにしている場合は、:focusが必要かどうかはわかりません。また、overflow: hiddenは実際にアウトラインを隠しています。

代わりにこれを試してみてください：

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