Warum hat meine benutzerdefinierte Schaltfläche in Chrome einen blauen Rand und wie kann ich ihn entfernen und gleichzeitig die Barrierefreiheit beibehalten?

So entfernen Sie den blauen Rand von benutzerdefinierten Schaltflächen in Chrome

Bei Websites mit benutzerdefiniertem Design entscheiden sich Entwickler häufig dafür, die Element durch Cascading Style Sheets (CSS). Allerdings kann es bei Chrome-Benutzern zu einem Problem kommen, bei dem beim Klicken ein blauer Rahmen um die Schaltfläche erscheint.

Fokuszustand neu definieren

Der problematische blaue Rahmen ist der Standard-Fokuszustand des Browsers. Um es zu entfernen, können Fokusstatuseigenschaften wie Umriss geändert werden:

button:focus {
  outline: 0;
}

Indem Sie die Umrisseigenschaft auf 0 setzen, wird die Fokusstatusgrenze effektiv deaktiviert.

Warnung zur Barrierefreiheitsregression entfernen

Es ist wichtig zu beachten, dass das Entfernen des Fokusstatus durch Festlegen von „outline: 0“ die Zugänglichkeit für Benutzer beeinträchtigen kann, die auf visuelle Hinweise wie den Fokus angewiesen sind Rahmen.

Für eine bessere Barrierefreiheit wird das folgende CSS empfohlen:

button:focus {
  outline: none;
}

Diese Änderung entfernt den Standard-Umrissstil und behält die Barrierefreiheit bei.

Beispiel

Im bereitgestellten CSS wurde die Regel „button:focus“ hinzugefügt:

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

/* Remove annoying Chrome blue focus border */
button:focus {
  outline: none;
}

Dadurch wird sichergestellt, dass der blaue Rand entfernt wird Chrome unter Beibehaltung der ordnungsgemäßen Zugänglichkeit.

Das obige ist der detaillierte Inhalt vonWarum hat meine benutzerdefinierte Schaltfläche in Chrome einen blauen Rand und wie kann ich ihn entfernen und gleichzeitig die Barrierefreiheit beibehalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!