Wie entferne ich den lästigen blauen Rand von den benutzerdefinierten Schaltflächen von Chrome?

Den lästigen blauen Rand auf den benutzerdefinierten Schaltflächen von Chrome loswerden

Beim Erstellen benutzerdefinierter Schaltflächen mit CSS kann es frustrierend sein, darauf zu stoßen ein unerwarteter blauer Rand, wenn Sie in Chrome darauf klicken. Dieser Umriss, der trotz der Einstellung des Rahmens auf „none“ vorhanden ist, kann die Benutzererfahrung beeinträchtigen.

Ein gängiger Ansatz zum Entfernen dieses Rahmens ist die Verwendung von „button:active { Outline: none }“ oder „button: Fokus { Gliederung: keine }. Diese funktionieren jedoch möglicherweise nicht immer effektiv.

Eine empfohlene Lösung

Obwohl es nicht ratsam ist, Browserränder zu entfernen, da dies die Zugänglichkeit beeinträchtigt, finden Sie hier eine Lösung, die das Problem beheben sollte Problem:

button:focus {
  outline: 0;
}

Wenn Sie den Umriss im Fokus auf „0“ setzen, zeigt Chrome den blauen Rand nicht mehr an und Ihre benutzerdefinierten Schaltflächen bleiben unverändert beabsichtigt.

Demonstration

Schauen Sie sich dieses aktualisierte CSS-Snippet und die Live-Demonstration unter http://jsfiddle.net/u4pXu/ an, um zu sehen, wie das Problem gelöst wurde:

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

button:focus {
  outline: 0;
}

Das obige ist der detaillierte Inhalt vonWie entferne ich den lästigen blauen Rand von den benutzerdefinierten Schaltflächen von Chrome?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!