Problème avec la couleur de surlignage tap Webkit non appliquée

Question

J'ai des problèmes pour obtenir la propriété -webkit-tap-highlight-color à appliquer à une div - je ne sais pas pourquoi elle ne l'est pas. Copier tous les styles qui s'appliquent à elle ci-dessous. Le résultat souhaité est un bouton de retour comme indiqué ici: http://building-iphone-apps.labs.oreilly.com/ch03.html#ch03_id2

.backButton { 
    font-weight: bold; 
    text-align: center; 
    line-height: 28px; 
    color: white; 
    text-shadow: rgba(0,0,0,0.6) 0px -1px 0px; 
    position: absolute; 
    top: 13px; 
    left: 6px; 
    font-size: 14px; 
    max-width: 50px; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    border-width: 0 8px 0 14px; 
    -webkit-tap-highlight-color:rgba(0,0,0,0); 
    -webkit-border-image: url(/static/images/backButton.png) 0 8 0 14; 
} 
.backButton.clicked { 
    -webkit-border-image: url(/static/images/back_button_clicked.png) 0 8 0 14; 
} 

.toolbar{ 
    background-color: #e1f7ff; 
    -webkit-box-sizing:border-box; 
    border-bottom:1px solid #559D75; 
    padding:10px; 
    height:53px; 
    background-image:-webkit-gradient(linear,left top,left bottom,from(#e1f7ff),to(#a1d2ed)); 
    position:relative; 
    z-index: 70; } 

Appliqué ici:

<div class='toolbar'> 
    <div class='backButton'>Back</div> 
</div> 

Regarde dans le simulateur iPhone (OS 4 activé) et Safari - même problème avec les deux (point culminant du robinet encore révéler).

Merci d'avance.

Answer 1

C'est embarrassant. L'image que j'avais utilisée à partir d'un exemple de bouton de retour en ligne avait la couleur d'arrière-plan - ce n'était pas un problème avec la propriété CSS.

Je suis presque pas assez gêné pour poster cette réponse, mais je suis prêt à avaler ma fierté dans l'espoir d'aider les autres. Que ce soit une leçon: si vous utilisez des images d'exemple de Google images, etc., assurez-vous que la copie que vous téléchargez ressemble à. Je voudrais pouvoir récupérer les heures que j'ai passées à essayer de déboguer cela, mais peut-être que cela aidera quelqu'un d'autre à les récupérer.

Leçon apprise ... complètement.

Answer 2

Essayez d'ajouter:

-webkit-user-select: none;