Color in css property not working in IOS Safari

Asked

Viewed 1,709 times

4

I have a <div> tagged <p> containing a phone number. In CSS I have the property with color: #000. However, only in Safari, it is not working. The phone turns white.

It’s like Safari is putting color on itself.

html css

  • Try to put color: #000! Port, or color: black! Port;

  • Joao Paulo, I tried and it didn’t work.

  • Putting right into the element’s style tag works? Even if it is not the solution already of some clue.

  • 1

    you post your html and css, it’s easier to help you. Note: when referencing a user, put the @ (arroba) before the name, pressing the arroba will show a box with the user name, select. So the user receives a notification and does not forget the post.

  • Thanks for the tip, @Filipe

3 answers

8


This is most likely due to the fact that most mobile operating systems automatically identify phone numbers and create a link of them with the smartphone dialer in order to "facilitate" the life of the user.

To remove this functionality in browsers / webviews, there are basically two solutions:

Solution 1: Use ta metatag format-detection:

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

This prevents that within the HTML page in question phone numbers are "converted".

Solution 2: Trick using elements inline:

<!-- Poderia ser qualquer elemento inline -->
<span>9911-</span><span>2233</span>

Separating the phone into several elements makes life difficult for the algorithm that identifies the numbers, causing them not to be identified and consequently changed.

  • 1

    Thanks, man. I used the metatag and it worked!

  • 1

    Thank you so much for the @kazzkiq tips! I had the same problem as @Ucas and used the inline element trick. It worked out great! Thanks!

1

I used a solution presented here and another from another forum and solved the problem.

Safari does not recognize css because of the "dialer" function. Chrome recognizes the css

If using the metatag proposed here, the site would lose in usability since customers would have to copy or memorize the number to call

So here’s what I did: I used the proposed metatag here: <meta name format-detection" content="telephone=no"> (thank you, good tip)

And I put a HREF on the phone: <a href="tel:1130693939>. In my case, it was in PHP, and it was with parentheses strokes and everything, but the dialers clean it up.

That is, I cheated Chrome on android and safari. Stylized straight and did not lose the dial function.

1

I did it this way and it worked:

HTML

<span>(99) 9999-9999</span>

CSS

span {color:#000000;}
span a {color:#000000;}

Even if there is no <a> in HTML I considered it as if it existed in css. Here it worked well.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.