Change a href="tel:" colour:

Question

I have some simple code which shows phone number and the user should be able to click on it and make a call:

<tr>
   <td>Telefon</td>
   <td><a href="tel:123">123</a></td>
</tr>

I would like to have classic black font instead of blue hyperlink so i wrote this in my CSS file:

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

It works completely fine on desktop browsers but on mobile, users still get a blue hyperlink instead of just black text which they can click. Can I force mobile browsers to show just black test but as a hyperlink?

Answer 1

try inline CSS like this

<tr>
   <td>Telefon</td>
   <td>
      <a href="tel:123" style="color:black;text-decoration: none;">123
     </a>
  </td>
</tr>