Hinzufügen von Fokus und Override auf CSS-Gliederung bewirkt, dass die Gliederung verschwindet

Question

Ich habe ein Bootstrap-Modal, das ein Bootstrap-Karussell enthält. Ich brauche die Folie, die im Karussell aktiv ist, um den Fokus zu haben. Ich versuche, den Umriss-Stil zu überschreiben, um den Fokus besser sichtbar zu machen (besonders in Edge). Ich kann mich erfolgreich konzentrieren (der Codepen wird das nur auf der ersten Folie für Demozwecke tun), und wenn ich den Umriss NICHT überschreibe, kann man die Standardumrisse des Browsers auf dem Bild sehen. Wenn ich jedoch versuche, den Umriss zu überschreiben, verschwindet er vollständig.

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

Schritte zum Reproduzieren:

1. Navigieren Sie zu Codepen.
2. Drücken Sie die Taste, um Modal zu öffnen.
3. Beachten Sie, dass es keinen Überblick gibt, um Fokus zu beschreiben.
4. Öffnen Sie den CSS-Editor.
5. Scrollen Sie bis zum Ende und löschen oder kommentieren Sie die Konturüberschreibung.
6. Speichern.
7. Drücken Sie die Taste, um Modal zu öffnen.
8. Beachten Sie, dass das Bild eine Kontur zum Beschreiben des Fokus hat.

Wie kann ich die Gliederung erfolgreich überschreiben?

Answer 1

ich in der Lage war, dies zu beheben, nachdem über diese anderen Stapel Post kommen. Das war extrem schwer zu suchen! styling the outline border with outer overflow set to hidden

Die Lösung, die ich wählte eine Kombination von zwei Vorschläge auf dieser Seite war:

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

Ich aktualisiert die codepen auch mit dieser Lösung: https://codepen.io/VVarPiglet/pen/QqegMd

Answer 2

Von dem, was ich sehen kann, bin ich mir nicht sicher, dass Sie die :focus benötigen, wenn Sie den .active Gegenstand zielen. Auch die overflow: hidden versteckt tatsächlich den Umriss.

Versuchen Sie stattdessen:

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