スマートフォンのハイライト色を変更したい

スマートフォン（Android Chrome、iOS Safari）では、リンクをタップしたときに:hoverセレクタや:activeセレクタの状態に遅れて切り替わるため、思ったとおりに動作しない場合があります。その代り、スマートフォンはリンクをタップした瞬間に、リンクのテキストがハイライトするになっています。

※最新のAndroid ChromeやiOS Safariでは、リンクテキストに背景色がつきます。少し前のAndroid ChromeやiOS Safariでは、背景色でなくボーダーラインが表示されます。

「-webkit-tap-highlight-color」プロパティを使うと、この背景色を変えたり、非表示にすることができます。このプロパティの値は、「rgba(赤,緑,青,透明度)」で指定します。なお、このプロパティは「:hover」セレクタではなく、通常の「a」や「a:link」セレクタのスタイルに組み込んでおく必要があります。このプロパティは現在のところ標準仕様ではなく、Android ChromeやiOS Safariのみが実装しています。PCブラウザでは何の動作もしません。

<!DOCTYPE html>
<html lang="ja">
<head>
    <title>サンプル</title>
    <style>
      a{
        color: #ea6357;
        text-decoration: none;
        -webkit-tap-highlight-color: rgb(255, 238, 148,0.8);
      }
      a:hover{
       outline:1px solid #ea6357;
      }
      
    </style>
</head>
<body>
   <h1>代表的な検索エンジン</h1>
   <ul>
        <li><a href="#">Google</a></li>
        <li><a href="#">MSN</a></li>
    </ul>
</body>
</html>

カテゴリー:WEB