Heim >Web-Frontend >CSS-Tutorial >Wie entferne ich den lästigen blauen Rand von den benutzerdefinierten Schaltflächen von Chrome?

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

Barbara Streisand
Barbara StreisandOriginal
2024-12-15 18:46:11177Durchsuche

How Do I Remove the Annoying Blue Border from Chrome's Custom Buttons?

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn