Prevent iPhone from automatically changing phone numbers to grey text color

For some reason, the iPhone keeps changing the phone numbers on my site to grey, despite using Drupal 7. I've heard that this is because the iPhone wants to make them stand out for users to interact with. I tried adding the following code to the head section of the document to prevent this:

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

However, it didn't work. I even made sure that CSS forced a white color, but nothing changed.

Is there any solution to prevent the iPhone from altering the color of these phone numbers?

htmlioscss

Answer №1

Aside from the meta tag you are currently using, it is recommended to enclose telephone numbers, addresses, and dates in anchor tags for iOS devices. Any desired styling should be applied to these anchor tags. When working on a website, you can add styles to your stylesheet. However, if you are coding an email, the styles must be inline within the anchor tag as shown below.

<a href="tel:+18005552368" style="color:#333333;text-decoration:none;outline:none;">1-800-555-2368</a>

Alternatively,

a[href^=tel]{
    color:#333333; // or use any other preferred color
    text-decoration:none;
    outline:none;
}

If you do not want these elements to be clickable, include pointer-events:none; and cursor:default; to prevent the mouse pointer from behaving like they are interactive.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error: The variable "deleted1" is not declared and cannot be used on the HTML button element's onclick

Hello, I need assistance from someone. I encountered an error message after trying to delete a row even though I have declared the button already. Error: deleted1 is not defined at HTMLButtonElement.onclick Could it be due to the script type being modul ...

javascripthtmlfirebasegoogle-cloud-firestore

What is the reasoning behind jQuery UI employing CSS classes as opposed to pseudo-classes?

In this detailed explanation found on this website, it is discussed why jQuery UI uses CSS classes like .ui-state-active that are applied through JavaScript, rather than utilizing existing CSS pseudo-classes like :active. What is the reasoning behind thi ...

javascriptcssjquery-ui

Organize your table with CSS styling

Looking for a way to rearrange a table with 2 columns after every 2 rows so that the lines continue on the right side? Check out the example below: [1][2] [1][2][5][6] [3][4] => [3][4][7][8] [5][6] [7][8] Wondering if this can be achieved using o ...

csshtml

Error Encountered in Xamarin Forms: System.ObjectDisposedException

I am encountering an issue where I receive an ObjectDisposedException when trying to change a list item's property from another screen. Below is the code snippet of my renderer: namespace SmartwebsCrossPlatform.CustomRenderers { public class Grad ...

androidiosxamarinxamarin.formsidisposable

What is causing the CORS error with JQUERY and JQM?

My HTML5 page is set up without any jQuery and has no CORS error, as shown below: <!DOCTYPE html> <HTML> <button type="button" onClick="getBase64FromImageUrl()">Click Me!</button> <img id="preview1" crossorigin="anonymous" src=" ...

jqueryhtmlgoogle-chromejquery-mobilecors

When floated to the right, the element is being pushed onto the next line in Firefox

Within a div, there are four elements. I specifically want the last element to be positioned on the far right, so I applied float: right to it. However, in Firefox, the last element gets pushed to the end of the next line instead. This issue does not occ ...

htmlcssfirefox

How come the Google fonts won't display correctly within my HTML document?

After importing some fonts into my CSS file, I noticed that they are not displaying correctly in the design. Below is the code for the imported fonts and CSS linking: https://i.stack.imgur.com/9RQ4u.png The output only shows sans-sarif working properly: ...

htmlcssgoogle-fonts

Instructions for integrating a select query within another select query in Codeigniter

I have a question regarding two tables shown below: /* questionnaire table */ | q_id | q_title | | ------- | ---------------------- | | 1 | What is your name? | | ------- | ---------------------- | | 2 | What is your gend ...

phphtmlcodeigniterselect

Utilizing the dynamic pairing of Three.js and CSS3 to bring life to animated 3D objects

I am currently working on a project that involves creating 3D Lego elements and assembling them into a figure using animation. I have successfully modeled the elements in Blender and exported them as .obj/mlt files without any issues. However, when it come ...

javascripthtmlthree.js3dcss-animations

Is there any method to ensure that IE8 properly displays opacity for a `:before` pseudo element?

Here is a simple CSS snippet that I am working with... div:before { content: "Hello there"; filter: alpha(opacity=40); -moz-opacity: .4; opacity: .4; } Check it out on jsFiddle. In Firefox 6, the :before pseudo element displays with t ...

cssinternet-explorer-8opacitypseudo-element

Using CSS to mask images with border-radius

I am currently designing a website for a friend, and I have encountered an issue with an image that I have masked using CSS border-radius. The image is larger and taller than its container, so I used JavaScript to center it correctly. However, it appears ...

javascriptcss

Angular and Bootstrap do not support margin styles

While working with Angular 5 and Bootstrap, I have encountered an issue with using inline styles for margin. The template I am using is as follows: @Component({ selector: "dynamic-container-component", template: ` <div styl ...

cssangularbootstrap-4

"Trouble with the external CSS file - it's not

I have a question regarding my jsp file, top.jsp, and css file, top.css. Despite specifying a background color in top.css, the color is not showing up on my top.jsp file. Code snippet from top.css: @CHARSET "ISO-8859-1"; body { background-color: bl ...

htmlcssjsp

Tips for displaying span value within asp.net web pages

I have an HTML code snippet that looks like this: <tr> <td> <span>Full Name:&nbsp;</span> </td> <td> <span id="FullName_PDLabel"><b>--</b></span> </td> & ...

htmlasp.net

What impact do varying screen sizes have on the width of CSS?

Can someone explain what this CSS code actually does: .class { width: 800px; } I've noticed that on my laptop screen, the element appears to be exactly 800 pixels wide. However, when I view it on my tablet screen, it shows up as 1600 pixels wide. Th ...

htmlcssresponsive-design

Incorporating a feature that displays one show at a time and includes a sliding animation into an

Hey there! I have this show/hide script on my website that's been working well. However, there are a couple of things I need help with. I want to modify the script so that only one div can be shown at a time. When a div appears, I'd love for it ...

javascriptjqueryhtml

The repeated failure of plugin installation is due to issues with the es6-prepare-plugin

I am currently working on setting up my iOS app and I am facing issues with getting the socialsharing and whitelist plugin to function properly. When I try to add the cordova-plugin-x-socialsharing plugin using the following command: sudo cordova plugin a ...

iosnode.jscordovaionic-frameworkplugins

"Fixing index.html with the power of Bootstrap 4: A step-by

*I am facing an issue where the default bootstrap navbar style appears before my custom styles get applied every time I reload the page. Any assistance would be greatly appreciated* - Whenever I reload the page, the default bootstrap navbar style appears ...

jqueryhtmlcssbootstrap-4

Save the user input to a dedicated text file

I am working with a couple of select tags that generate an array. Previously, I was only logging the array to the console upon pressing the SUBMIT button, but now I want to save it to a separate text file. Here is my main.html code: <form method="POS ...

javascripthtml

Switch out 2 Bootstrap columns for 2 concealed columns with just a click. Utilizing Rails 4 and Bootstrap

Using Twitter Bootstrap 3 for a column system showcasing four similar advertisements at the bottom of the page. Code Snippet: <div class="row similar"> <% @recomended_ads.each do |advertisement| %> <div class="col- ...

javascriptjquerycssruby-on-railstwitter-bootstrap