web-dev-qa-db-fra.com

Comment supprimer le style bleu des numéros de téléphone sur iPhone/iOS?

Existe-t-il un moyen de supprimer la couleur bleue du lien hypertexte par défaut d'un numéro de téléphone affiché sur un iPhone? Vous souhaitez ajouter une balise ou un code CSS spécifique à Mobile Safari?

Je n'ai ceci en place que pour le numéro:

<p id="phone-text">Call us on <strong>+44 (0)20 7194 8000</strong></p>

Et il n'y a pas de lien hypertexte, mais iPhone affiche toujours ce numéro de texte sous forme de lien hypertexte. J'ai ce problème de rendu sur certains de mes sites Web, mais je ne vois pas pourquoi cela se produit.

J'ai lu ce post:

Numéros de rendu HTML mobile

Mais est-ce la seule solution possible? 

htmlioscssmobile-safari
181
Reno

Deux options…

1. Définissez la balise méta format-detection.

Pour supprimer tout le formatage automatique des numéros de téléphone, ajoutez ceci à la head de votre document html:

<meta name="format-detection" content="telephone=no">

Voir plus Touches de balises méta spécifiques à Apple .

Remarque: Si vous avez des numéros de téléphone sur la page avec ces numéros, vous devez les formater manuellement en tant que liens:

<a href="tel:+1-555-555-5555">1-555-555-5555</a>

2. Impossible de définir une balise META? Voulez-vous utiliser css?

Deux options css:

Option 1 (préférable pour les pages Web)

Liens de cible avec des valeurs href commençant par tel en utilisant ce sélecteur d'attribut css:

a[href^="tel"] {
  color: inherit; /* Inherit text color of parent element. */
  text-decoration: none; /* Remove underline. */
  /* Additional css `propery: value;` pairs here */
}

Option 2 (préférable pour les modèles de courrier électronique HTML)

Vous pouvez également, lorsque vous ne pouvez pas définir de balise méta, telle que dans un courrier électronique HTML, insérer des numéros de téléphone dans des balises lien/ancre (<a href=""></a>), puis cibler leurs styles à l'aide de la méthode css similaire à celle ci-dessous et ajuster les propriétés spécifiques requises. réinitialiser:

a[x-Apple-data-detectors] {
  color: inherit !important;
  text-decoration: none !important;
  font-size: inherit !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}

Si vous souhaitez cibler des liens spécifiques, utilisez des classes sur vos liens, puis mettez à jour le sélecteur css ci-dessus sur a[x-Apple-data-detectors].class-name.

385
Beau Smith

Pour développer une suggestion antérieure de David Thomas:

a[href^="tel"]{
    color:inherit;
    text-decoration:none;
}

Ajouter ceci à votre css laisse la fonctionnalité du numéro de téléphone mais enlève le soulignement et correspond à la couleur que vous utilisiez à l'origine.

Étrange que je puisse poster ma propre réponse mais que je ne puisse pas répondre à celle de quelqu'un d'autre .. 

159
Silverback

Si vous souhaitez conserver la fonction du numéro de téléphone, mais simplement supprimer le soulignement à des fins d'affichage, vous pouvez attribuer un style au lien:

a:link {text-decoration: none; /* or: underline | line-through | overline | blink (don't use blink. Ever. Please.) */ }

Je n'ai pas vu de documentation suggérant qu'une classe soit appliquée aux liens de numéros de téléphone. Vous devrez donc ajouter des classes/identifiants aux liens que vous voulez avoir un style différent.

Sinon, vous pouvez styliser le lien en utilisant:

a[href^=tel] { /* css */ }

Ce qui est compris par l'iPhone et ne sera pas appliqué (pour autant que je sache, peut-être Android, Blackberry, etc., les utilisateurs/développeurs peuvent commenter) par tout autre agent utilisateur.

28
David Thomas

Si les gens trouvent cette question sur Google, il vous suffit de traiter le numéro de téléphone comme un lien, car Apple le définira automatiquement.

votre HTML

<p id="phone-text">Call us on <strong>+44 (0)20 7194 8000</strong></p>

votre css

#phone-text a{color:#fff; text-decoration:none;}
11
sammi

Puisque nous utilisons des liens tel: sur un site avec une icône de téléphone sur: avant que la plupart des solutions publiées ici ne posent un autre problème.

J'ai utilisé la méta-tag:

<meta name="format-detection" content="telephone=no">

Ceci combiné avec la spécification tel: links sur tout le site où il devrait être lié!

L'utilisation de CSS n'est vraiment pas une option car elle cache des liens tels que les liens.

9
Valross.nu

Une vieille question mais comme aucune des réponses ci-dessus n’était bonne pour moi, je poste comment je l’ai résolue

J'ai un numéro de téléphone dans une liste:

<li class="phone_menu">+555 5 555 55 55</li>

css:

.phone_menu{
  color:orange;
}

Mais sur iPad/iPhone, il était noir, alors je viens d’ajouter ceci au css:

.phone_menu a{
  color:orange;
}
5
Marko

Le tour simple a fonctionné pour moi, ajoutant un objet caché au milieu du numéro de téléphone.

<span style="color: #fff;">
0800<i style="display:none;">-</i> 9996369</span>

Cela vous aidera à remplacer la couleur du numéro de téléphone pour IOS.

5
Arkadas Kilic
a[href^=tel]{
    color:inherit;
    text-decoration: inherit;
    font-size:inherit;
    font-style:inherit;
    font-weight:inherit;
3
Ross

Selon Beau Smith, à propos de ce sujet: Comment supprimer le style bleu des numéros de téléphone sur iPhone/iOS?

Vous devriez appliquer "tel:" dans l'attribut href de votre lien comme ceci:

<a href="tel:5551231234">555 123-1234</a>

Cela supprimera tout style et DOM supplémentaire à la chaîne de numéro de téléphone.

3
SequenceDigitale.com

Pas besoin de supprimer la détection de format en utilisant <meta name="format-detection" content="telephone=no">. Essayez d’utiliser un numéro de téléphone dans n’importe quelle balise plutôt que d’ancrer une balise et de la styler en conséquence, par exemple: span { background:none !important; border:0; padding:0; }

2
Neetu

Je suis allé et vient entre 

1.

    <a href="tel:5551231234">

2.

    <meta name="format-detection" content="telephone=no">

Essayer de faire fonctionner le même code pour les ordinateurs de bureau et les iPhone. Le problème était que si la première option est utilisée et que vous cliquez dessus à partir d'un navigateur de bureau, un message d'erreur apparaît et si la seconde est utilisée, la fonctionnalité de tabulation d'appel sur l'iPhone iOS5 est désactivée.

J'ai donc essayé et essayé et il s'est avéré que l'iPhone considère le numéro de téléphone comme un type spécial de lien pouvant être formaté avec CSS comme tel. J'ai enveloppé le numéro dans une balise d'adresse (cela fonctionnerait avec n'importe quelle autre balise HTML, essayez juste d'éviter le balise <a>) et je l'ai stylé en CSS comme 

.myDiv address a {color:#FFF; font-style: normal; text-decoration:none;}

et cela a fonctionné - dans un navigateur de bureau, un texte en clair était affiché et dans un mobile Safari, sous forme de lien avec la fenêtre Appeler/Annuler apparaissant sous l'onglet, sans couleur bleue ni soulignement par défaut. 

Soyez juste prudent avec les règles CSS appliquées au nombre, en particulier lors de l'utilisation de padding/margin.

2
Bryana

<meta name="format-detection" content="telephone=no"> . Cette métabalise fonctionne dans le navigateur Safari par défaut sur les appareils iOS et ne fonctionne que pour les numéros de téléphone qui ne sont pas encapsulés dans une liaison téléphonique.

1-800-123-4567
<a href="tel:18001234567">1-800-123-4567</a>

la première ligne ne sera pas formatée en tant que lien si vous spécifiez la métabalise, mais la deuxième ligne le sera car elle est encapsulée dans une ancre de téléphone.

Vous pouvez renoncer à la métabalise et utiliser un mixin tel que

a[href^=tel]{
    color:inherit;
    text-decoration:inherit;
    font-size:inherit;
    font-style:inherit;
    font-weight:inherit;
}

maintenir le style de vos numéros de téléphone, mais vous devez les envelopper dans une ancre de téléphone.

Si vous voulez être extrêmement prudent et vous protéger contre un numéro de téléphone qui n'est pas correctement formaté avec une balise d'ancrage d'habillage, vous pouvez explorer le DOM et le modifier à l'aide de ce script. Ajustez le motif de remplacement comme vous le souhaitez.

$('body').html($('body').html().replace(/^\D?(\d{3})\D?\D?(\d{3})\D?(\d{4})/g, '<a href="tel:+1$1$2$3">($1) $2-$3</a>'));

ou même mieux sans jQuery

document.body.innerHTML = document.body.innerHTML.replace(/^\D?(\d{3})\D?\D?(\d{3})\D?(\d{4})/g,'<a href="tel:+1$1$2$3">($1) $2-$3</a>');
1
davidcondrey

iOS rend les numéros de téléphone cliquables par défaut (pour des raisons évidentes). Bien sûr, cela ajoute une balise supplémentaire qui remplace votre style si votre numéro de téléphone n’est pas déjà un lien.

Pour résoudre ce problème, essayez d'ajouter ceci à votre feuille de style: a[href^=tel] { color: inherit; text-decoration: none; }

Cela devrait garder vos numéros de téléphone stylisés comme vous le souhaitez sans ajouter de balises supplémentaires.

1
subindas pm

Mettre le numéro dans un <fieldset> empêchera iOS de convertir le numéro en lien pour une raison quelconque. Dans certains cas, cela pourrait être la bonne solution. Je ne préconise pas une désactivation générale de la conversion en liens.

1
Oliver P

Cela l'a fait pour moi:

.appleLinks a {color:#000000;}
.appleLinksWhite a {color:#ffffff;}

Vous pouvez trouver plus d'infos ici .

0
Claudio Pascariello

Cet attribut x-ms-format-detection = "none" gère le format du téléphone.

https://msdn.Microsoft.com/en-us/library/dn337007(v=vs.85).aspx

<p id="phone-text" x-ms-format-detection="none"  >Call us on <strong>+44 (0)20 7194 8000</strong></p>
0
Tabares

Essayez d'utiliser le caractère ASCII pour le tiret entre les séparations de chiffres.

à partir de ceci: -

à ceci: &ndash;

ex: changer 555-555-5555 => 555&ndash;555&ndash;5555

0
Justin Jb Bryant

Dans Joomla, Yootheme travaille pour moi:

a:not([class]) {
    color: #fff !important;
}
0
Max