Mobile Web Design

Frontend Entwicklung für mobile Endgeräte

18. Januar 2012
von Michael Schwarz
Keine Kommentare

CSS – Hintergrundfarbe angetippter Links auf Touchscreens

Wenn man auf dem iOS oder Android Touchscreen einen Link antippt (also das Touch-Pendant zum Klick mit der Maus), so färbt sich der Hintergrund der “klickbaren” Fläche per default leicht grau ein. Um dies zu unterbinden oder anders zu gestalten, nehme man die (webkit-spezifische) CSS Eigenschaft “-webkit-tap-highlight-color“.

Die gewünschte Hintergrundfarbe kann man in Hex-Werten oder in RGBA angeben. Die RGBa Kombination ist zu bevorzugen, da dies sowohl auf iOS, als auch auf Android Geräten funktioniert. Dies sieht man nur beim Testen auf einem iPhone/Android selbst, nicht am Desktop im Safari/Chrome.

Beispiele:
/* kein Hintergrund, nur iOS:*/
-webkit-tap-highlight-color: transparent;

/* kein Hintergrund in iOS und Android:  */
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

/* grauer Hintergrund mit 40% Transparenz: */
-webkit-tap-highlight-color:rgba(204,204,204,0.4); 

Ob und wie das auf Windows Phone 7.5 (und höher) Geräten geht, wäre noch auszuchecken.