Entfernen Sie den blauen Rand von der benutzerdefinierten CSS-Schaltfläche in Chrome

Ich arbeite an einer Webseite und möchte sie individuell gestalten<button> Stichworte. Also sagte ich mit CSS:border: none. Jetzt funktioniert es perfekt in Safari, aber wenn ich in Chrom auf eine der Schaltflächen klicke, wird sie mit einem nervigen blauen Rand umrandet. ich dachtebutton:active { outline: none } oderbutton:focus { outline:none } würde funktionieren, aber auch nicht. Irgendwelche Ideen?

So sieht es vor dem Klicken aus (und so soll es auch nach dem Klicken aussehen):

Und das ist die Grenze, von der ich spreche:

Hier ist mein CSS:

button.launch {
    background-color: #F9A300;
    border: none;
    height: 40px;
    padding: 5px 15px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 300;
    margin-top: 10px;
    margin-right: 10px;
}

button.launch:hover {
    cursor: pointer;
    background-color: #FABD44;
}

button.change {
    background-color: #F88F00;
    border: none;
    height: 40px;
    padding: 5px 15px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 300;
    margin-top: 10px;
    margin-right: 10px;
}

button.change:hover {
    cursor: pointer;
    background-color: #F89900;
}

button:active {
    outline: none;
    border: none;
}

Antworten auf die Frage(19)

Ihre Antwort auf die Frage