Entfernen der Box, nachdem ein div mit border-Radius ausgewählt wurde

Question

Ich habe ein div mit einem span-Element darin, das eine Umleitungsfunktion dafür haben wird. Das div-Objekt besitzt eine Eigenschaft "border-radius". Das ganze Arbeiten und UI sieht gut aus. Aber wenn das Element ausgewählt ist, sehe ich eine Rahmenbox um das div herum.

Da es nur für eine Minute vor der Umleitung erscheint, konnte ich nicht verfolgen, was das CSS-Problem damit sein könnte.

Hier ist mein Code:

HTML: Button-Text

CSS:

.menu-button{ 
    background-color: green; 
    border-radius: 30px; 
    cursor: pointer; 
    margin: 10px 5px 2%; 
    text-transform: uppercase; 
} 

dies ist, wie die div auf ausgewählten aussehen wie, bevor es auf andere Seite bewegt:

Jede Hilfe zu diesem wird sehr geschätzt.

Answer 1

Stellen Sie sicher, dass die outline der Menü-Taste Klasse none gesetzt. Nämlich, outline: none;.

Dies geschieht aufgrund einiger Standardwerte des Elements button. In Google Chrome beispielsweise ist die outline ein blauer Standardrahmen, um zu markieren, wo Sie gerade sind.

Durch die Einstellung outline: none; werden alle border gelöscht, wenn Sie auf ein button Element klicken.

---

Dies gilt auch für input Elemente, für zukünftige Referenz.

Answer 2

Umrissattribut für die Menüschaltfläche festlegen. wie diese

.menu-button{ 
    background-color: green; 
    border-radius: 30px; 
    cursor: pointer; 
    margin: 10px 5px 2%; 
    text-transform: uppercase; 
    outline:none; 
} 

Answer 3

.menu-button{ 
    background-color: green; 
    border-radius: 30px; 
    cursor: pointer; 
    margin: 10px 5px 2%; 
    text-transform: uppercase; 
    border:none; 
}