HTML: Los números de teléfono cambian de color en dispositivos iOS (iPhone, iPad etc)

Llevamos un tiempo con un cliente quejándose porque el teléfono en su web no se veía bien en los iPhone. Nosotros no tenemos iPhone pero lo probábamos en mil teléfonos y mil emuladores y se veía bien. No encontrábamos la razón.

El color de los números de teléfono cambia en dispositivos iOS.

Al final la encontramos. Lo que pasa es que iOS detecta los números de teléfono en las páginas web y cambia el color como si fuera un enlace. Ya que puedes pinchar en el teléfono de la página y te llama.

Para evitarlo por CSS tenemos que poner lo siguiente (si queremos que coja el mismo color que tiene el texto alrededor):

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

Obviamente esto lo podemos cambiar por el color que queramos como:

a[href^=tel] { color: #fff; }

Así de fácil.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Resumen de nuestra Política de Privacidad

  • Responsable: SmythSys IT Consulting SLNE.
  • Finalidad: Gestionar y moderar los comentarios.
  • Legitimación: Necesitas dar tu consentimiento para publicar un comentario.
  • Destinatarios: Tus datos se alojan en los servidores de OVH.
  • Derechos: Tienes derecho a acceder, rectificar, limitar y suprimir los datos en la dirección del responsable (en nuestra política de privacidad).

Scroll al inicio