none
Styling auto detected phone number RRS feed

  • Question

  • I was wondering if there is any way to style the links added to phone numbers in the IE11 tile view? Since the auto detected links don't add anything to the DOM I am losing the links as they are blue on a blue background. I don't want to remove the ability to for users to call the number, but unlike iOS, I can't add CSS for an <a> in my stylesheets.  

    Any help would be appreciated. 

    Saturday, December 28, 2013 3:24 AM

Answers

  • hi,

    You could add a class name for your phone number tag,like this:

    <div class="tele">
     <a>
    123456
     </a>
    </div>
    
    css:
    
    .tele a
    {
    
    }

    If you do this, you could only change the phone number style or you could directly use div to instead of tag <a>.

    Please try it.

    If I misunderstand, please let me know.

    Regards,

    Will


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Monday, December 30, 2013 7:10 AM
    Moderator

All replies

  • hi,

    You could add a class name for your phone number tag,like this:

    <div class="tele">
     <a>
    123456
     </a>
    </div>
    
    css:
    
    .tele a
    {
    
    }

    If you do this, you could only change the phone number style or you could directly use div to instead of tag <a>.

    Please try it.

    If I misunderstand, please let me know.

    Regards,

    Will


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Monday, December 30, 2013 7:10 AM
    Moderator
  • hi,

    You could add a class name for your phone number tag,like this:

    <div class="tele">
     <a>
    123456
     </a>
    </div>
    
    css:
    
    .tele a
    {
    
    }

    If you do this, you could only change the phone number style or you could directly use div to instead of tag <a>.

    Please try it.

    If I misunderstand, please let me know.

    Regards,

    Will


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    You misunderstood.

    The problem is:

    - if you write a phone number like a link in a web page <a href="tel:12345">12345</a> you end up having a link in any browser and that brigs to dumb and useless behavior on desktops (for instance on Firfeox on an OsX computer without phone or modem clicking the link opens up the FaceTime app).

    - if you just write a phone number as is, some browsers just leave it as it is, some others detect it and convert it to a link. This is correct but the link is ugly blue underlined.

    - The iOS and Android mobile browsers add a <a href="tel:... tag arount the detected numbers, so you can style them adding some css like this:

        a[href^="tel"] {
          color: #000;
          text-decoration: none; /* Remove underline. */
         }

    - the EDGE browser instead keeps the blue underlined link and there is no known way to style it differently.

    So the legitimate question is: "How do we style EDGE auto-detected phone numbers?"




    • Edited by francescomm Monday, October 8, 2018 10:30 AM
    Monday, October 8, 2018 10:28 AM