Heim > Web-Frontend > CSS-Tutorial > Warum hat meine benutzerdefinierte Schaltfläche in Chrome einen blauen Rand und wie kann ich ihn entfernen und gleichzeitig die Barrierefreiheit beibehalten?

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

Barbara Streisand
Freigeben: 2024-12-17 21:15:13
Original
816 Leute haben es durchsucht

Why Does My Custom Button Have a Blue Border in Chrome, and How Can I Remove It While Maintaining Accessibility?

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:

1

2

3

button:focus {

  outline: 0;

}

Nach dem Login kopieren

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:

1

2

3

button:focus {

  outline: none;

}

Nach dem Login kopieren

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

Beispiel

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

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;

}

Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage