web-dev-qa-db-fra.com

supprimer l'arrière-plan gris du lien cliqué dans ios safari / chrome / firefox

Lorsque vous cliquez (touchez) sur un lien dans Safari (ou chrome ou firefox) pour iOS, vous obtenez un arrière-plan gris derrière le lien (uniquement pendant que vous le maintenez). Existe-t-il un moyen de supprimer cette fonctionnalité en utilisant CSS?

Veuillez voir l'exemple d'image ci-dessous:

enter image description here

ioscssmobile-safarimobile-chrome
64
sam

Webkit a une propriété de style spécifique pour cela: -webkit-tap-highlight-color.

Copié de: http://davidwalsh.name/mobile-highlight-color -

/* light blue at 80% opacity */
html {
    -webkit-tap-highlight-color: rgba(201, 224, 253, 0.8);
}

/* change it for a div that has a similar background-color to the light blue tap color */
.blueDiv {
    -webkit-tap-highlight-color: rgba(251, 185, 250, 0.9);
}

Si vous souhaitez supprimer complètement la surbrillance ...

.myButton {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
161
pk-nb

Les dernières versions d'iOS ignorent les couleurs RGBA pour une raison quelconque.

Pour le supprimer, j'ai fini par devoir utiliser ce qui suit:

-webkit-tap-highlight-color: transparent;

Comme indiqué ici: https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color

1
Peter Browse