iPhoneのChromeで電話番号に下線がつく

Question

実現したいこと

iPhoneのChromeでWEBサイトを表示させると、電話番号に自動で下線がつくので、その下線だけを非表示にしたいです。

発生している問題・分からないこと

iPhoneの機能としてWEBサイト上の電話番号に自動で下線が付与されるらしいですが、
実際に確認してみたところ、Safariでは指定通りの色が反映されず、Chromeでは色は反映してますが、
下線についてはSafari、Chromeともに表示されました。

該当のソースコード

<div class="contact-3line-sp">
  <p>ご相談は無料です</p>
  <p class="phone-num"><img src="img/icon_phone_white.svg" alt="">000-000-0000</p>
  <p>（月曜〜金曜）9時〜18時　（土曜）9時〜17時</p>
</div>

.phone-num a {
  color: #fff;
  text-decoration: none !important;
}

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

ネットで検索してみて、自動で付与されるaタグに対して改めて色と下線削除の指定をしました。
→Safariでは色、下線ともに希望通りになりましたが、Chromeでは色のみ反映し、下線はついたままでした。

!importantを追加しました。
→結果は変わらずでした。

補足

表示確認時の機種
iPhone SE3 iOS18.1.1（Safariも同じバージョンとのこと）
Chrome バージョン131.0.6778.73

・電話番号の背景に色を指定してますので、電話番号は白の指定です。
・最新データへの更新確認のために電話番号の数字と色を変えてみましたが、
Safariではどちらも変更されましたが、Chromeでは数字だけ変更され、なぜか色のみ変更はできませんでした。

Answer 1

このあたりは試されましたか？

【【HTML】iOSのSafariが電話番号を勝手にaタグ化する３つの対策【CSS】 | SIMS-CODE】
https://shimizu-create.com/2024/04/4253/

【iPhoneの電話番号自動リンク：下線と文字色の修正方法 | 創kenブログ】
https://souken-blog.com/2018/05/22/ios-phonenumber-link/

Comments

[ttaa7030]

ありがとうございます！
一つ目のリンク先のmetaタグの指定で下線がなくなりました。
（aタグへの指定では変化なしでしたが）
大変助かりました！