"Touchhintergrundfarbe" bei Buttons in mobilen Geräten

[TheDarkBlueEvil]

Hi Leute,

erst einmal sorry für den Titel. Ein besser ist mir leider nicht eingefallen.
Mir ist aufgefallen das es Webseiten gibt, bei denen zum Beispiel der Hintergrund (oder besser gesagt die Fläche) des "Burgermenüs" bei Toucheingabe, kurz einen aktiven Hintergrund anzeigt. Verstärkt sieht man das, wenn das Burgermenü Transparent auf weißen Hintergrund ist. Ich hoffe ihr wisst was ich meine. Da es nicht bei allen Webseiten vorkommt, denke ich, dass es vielleicht am Framework liegen könnte. Konkret fällt es mir bei Seiten die mit Wordpress erstellt wurden vermehrt auf.

An was liegt das und gibt es eine Möglichkeit das abzustellen. Also kein Hintergrund bei Touchklick?
Ich habe einmal ein GIF davon erstellt (hoffentlich geht das hier). Konkret geht es um den kurzzeitigen blauen Hintergrund.

 

[threadi]

Das dürfte durch die focus oder hover Pseudoklasse passieren.

:focus - CSS: Cascading Style Sheets | MDN

The :focus CSS pseudo-class represents an element (such as a form input) that has received focus. It is generally triggered when the user clicks or taps on an element or selects it with the keyboard's Tab key.

developer.mozilla.org

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

Wenn Du ein konkretes Beispiel nennst wo das so ist, kann man dir den Quellcode dazu für diesen Fall sicherlich raussuchen.

 

[TheDarkBlueEvil]

Hallo,

vielen Dank für deine Rückmeldung. Aktuell habe ich kein zugängliches Beispiel (läuft Lokal) was ich schnell einmal zeigen könnte. Wäre es möglich diese beiden Pseudoklassen via JQuery oder CSS einfach testweise zu deaktivieren?

 

[threadi]

Du kannst sie per CSS überschreiben. Schau dir in der Entwicklerkonsole deines Browsers an welche Eigenschaft es ist.

 

[TheDarkBlueEvil]

Hm... ich habe mir das mal angesehen und komme irgendwie nicht drauf. Ich habe nun eine Beispielseite erstellt. Hier ist gut zu sehen das es in der Desktop Einstellung keine Hintergrundfarbe bei Klick gibt, wohl aber in der mobilen Ansicht und auch am Handy. Getestet habe ich es mit dem Chrome Entwicklermodus in der mobilen Ansicht.

Hier der Link:
*****

Ich werde später den Zugang wieder deaktivieren.

 

[threadi]

Bei der Seite kann ich den beschriebenen Effekt gar nicht nachvollziehen. Das Hamburger-Menü ist dort zudem nur eine Ansammlung von divs und kein echter Link.

Meine Vermutung ist gerade eher, dass diese blaue Markierung die man in deinem gif oben sehen kann die Textmarkierung ist - quasi die Auswahl des Elementes, welches den Hamburger repräsentiert. Wieso das bei dir am Mobilgerät passiert weiß ich nicht. Ist jedenfalls kein CSS-Effekt.

 

[TheDarkBlueEvil]

Die Vermutung habe ich auch. Aber irgendwo muss doch der unterschied zwischen Desktop und Mobil herkommen oder? Wenn du im Chrome Entwicklermodus auf die Handyansicht umschaltest, ist der gleiche Effekt zu sehen.

 

[threadi]

Ich nutze nur Firefox, da hab ich das nicht gesehen.

Im Chrome sehe ich es auch. Vermutlich ist es das hier:

https://stackoverflow.com/questions/21003535/anyway-to-prevent-the-blue-highlighting-of-elements-in-chrome-when-clicking-quic

 

[TheDarkBlueEvil]

Du hast gerade meinen Tag/Wochenende gerettet - DANKE. Das ist die Lösung die ich benötige.
Der Effekt tritt nun auf keinem Gerät und in keinem Browser mehr auf.

Das habe ich dazu eingebaut:



Muss mal schauen ob ich das nicht gleich Global anstatt mit einer Class einbinde. Was meinst du dazu?
Wie würdest du das am besten einbinden. Der Effekt tritt eigentlich bei jeden Button, Link oder sonstigen klickbaren auf...

Eventuell könnte man den Titel dieses Beitrages anpassen...

LG

 

[threadi]

Klar, kannste auch global setzen per * für alle Elemente.