Maison > interface Web > tutoriel CSS > le corps du texte

Une brève analyse des propriétés peu connues en CSS3 : -webkit-tap-highlight-color

高洛峰
Libérer: 2017-02-11 13:45:28
original
3196 Les gens l'ont consulté

L'attribut -webkit-tap-highlight-color en CSS est simplement le paramètre de couleur d'arrière-plan lorsque vous cliquez sur le téléphone mobile. L'article suivant présente principalement cet attribut peu connu en CSS3 : -webkit-tap -Highlight-color Related. informations, les amis dans le besoin peuvent s'y référer, jetons un coup d'œil ci-dessous.

-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 semi-transparent. 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);
Copier après la connexion

Prise en charge du navigateur : uniquement iOS (iPhone et iPad).

explication détaillée de webkit-text-size-adjust en css3

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

2. webkit-text-size- L'ajustement du corps entraînera l'échec du zoom de la page

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

4. size-adjust, ne le définissez pas comme héritable ou Global

outline : aucun

(1) Le but de définir ce style pour la balise a côté PC consiste à annuler l'apparence lorsque vous cliquez sur la balise a dans la ligne pointillée du navigateur IE. Les navigateurs ie7 et inférieurs 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. Pour annuler le style par défaut lors de la mise au point, utilisez -webkit. -appuyez sur la couleur de surbrillance.

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

apparence du webkit

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

Remarque : Différents types d'entrée se comportent différemment après avoir utilisé 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的文字都不会自动调整
Copier après la connexion

-webkit-touch-callout

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

Plus d'analyse des propriétés peu connues en CSS3 : -webkit -articles liés à tap-highlight-color, veuillez faire attention au site Web PHP chinois !

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal