How can I remove the blue styling on phone?

Question

I'm building a website and all the styling in mobile works fine except for links on iPhone. I have tried the solutions in this thread: How do I remove the blue styling of telephone numbers on iPhone/iOS?

I have tried this CSS:

a[href^="tel"],
span[href^="tel"] {
  color: inherit !important;
  text-decoration: none !important;
  font-size: inherit !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}

And also this CSS:

a[x-apple-data-detectors],
span[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;
}

Nothing of the above works for me. Any suggestions on how I could solve this problem with pure CSS so the styling will inherit for all my web pages?

Update with an solution

The accepted answer will change the default behaviour of all <span> / <a> elements. Instead you should style using id or class on the elements. Example could look like:

.lnd-header-button__text{  
    all: initial;
  }

  .lnd-header-button__text * {
   all: unset;
  }

Not including the current markup (HTML) and what CSS gives the links their color (you can find this by inspecting the elements), invites solutions/answers which are likely to affect more elements than the ones you want to style and solutions applying higher specificity to the CSS than necessary., making it more difficult for you to apply consequent CSS declarations to your elements. — tao, Jan 14 '22 at 08:38
I updated the post hope this was what you were looking for, I get your point thanks for explaining it. @tao — Filip Huhta, Jan 14 '22 at 09:12

jeremy-denis · Accepted Answer · 2022-01-14T09:18:52.830

2

you can do it with a media query

be careful to use precise selector because using css all affect all css property of the matching selector

@media only screen and (max-width: 600px) {
  my-selector {  
    all: initial;
  }

  my-selector * {
   all: unset
  }
}

edited Jan 14 '22 at 09:18

answered Jan 14 '22 at 08:14

jeremy-denis

6,368
3
18
35

1

Having a warning about the fact the used selectors are, most likely, too generic, is enough. Thanks for improving the quality of your answer. – tao Jan 14 '22 at 09:11

How can I remove the blue styling on phone?

1 Answers1