Comment utiliser la propriété webkit-tap-highlight-color de CSS3

Cette fois, je vais vous montrer comment utiliser la propriété webkit-tap-highlight-color de CSS3. Quelles sont les précautions lors de l'utilisation du webkit-tap-highlight-color de CSS3. Voici des cas pratiques. Un Levez-vous et jetez un œil.

-webkit-tap-highlight-color

Cette propriété est uniquement disponible sur iOS (iPhone et iPad). Lorsque vous cliquez sur un lien ou un élément cliquable défini via Javascript, il apparaîtra avec un fond gris translucide. Pour réinitialiser ce comportement, vous pouvez définir -webkit-tap-highlight-color sur n'importe quelle couleur.
Pour désactiver cette mise en évidence, définissez la valeur alpha de la couleur sur 0.

Exemple : définissez la couleur de surbrillance sur 50 % de rouge transparent :

-webkit-tap-highlight-color: rgba(255,0,0,0.5);

Support du navigateur : iOS (iPhone et iPad uniquement).

css3 Explication détaillée de -webkit-text-size-adjust

1. Lorsque font-size<12px dans la feuille de style, l'affichage de la police dans la version chinoise du navigateur Chrome est toujours 12px À ce stade, vous pouvez utiliser html{-webkit-text-size-adjust:none;>

2 Placer -webkit-text-size-adjust sur le corps entraînera l'échec du zoom de la page.

3 . Le corps héritera du style défini en html

4. Utilisez -webkit-text-size-adjust et ne le définissez pas comme héritable ou global

contour : aucun

(1) Le but de la définition de ce style pour la balise a sur le PC est d'annuler la ligne pointillée qui apparaît lorsque l'on clique sur la balise a sous le ie navigateur . Les navigateurs IE7 et versions antérieures ne reconnaissent pas encore cet attribut. Vous devez ajouter hidefocus="true"

(2)input, textarea{outline:none} à la balise a pour annuler le style de focus de la zone de texte par défaut sous. chrome

(3) ne fonctionne pas sur le terminal mobile Si vous souhaitez supprimer le style par défaut de la zone de texte, vous pouvez utiliser -webkit-apparence. lors de la mise au point, utilisez -webkit-tap-highlight -color.

J'ai vu certains fichiers de réinitialisation mobile ajouter cet attribut, mais il est en fait redondant.

webkit-apparence

-webkit-appearance: none;   //消除输入框和按钮的原生外观，在iOS上加上这个属性才能给按钮和输入框自定义样式 。

Remarque : Différents types d'entrée se comportent différemment après l'utilisation de cet attribut. Le texte et le bouton n'ont pas de style, la radio et la case à cocher disparaissent directement

-webkit-user-select

-webkit-user-select: none; // 禁止页面文字选择 ，此属性不继承，一般加在body上规定整个body的文字都不会自动调整

-webkit-touch-callout

-webkit-touch-callout:none;  // 禁用长按页面时的弹出菜单(iOS下有效) ,img和a标签都要加

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Quatre méthodes de masquage en html+css
Malentendus courants dans l'utilisation du CSS et du HTML

Explication détaillée de l'utilisation de border-image en style CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!