[CSS] iPhoneのSafariでタップした際に表示される暗めな影を消すCSS

こんにちは、@yoheiMuneです。
iPhoneのSafariでリンクとかボタンとかをタップした際に、一瞬だけ半透明の黒い背景が出る現象。 この黒半透明を出させないCSSの設定を学んだので、ブログで紹介したいと思います。

タップした際にでる黒い半透明な背景とは

具体的には、以下のようなモノです。



これってタップした感覚が出るので嬉しい反面、タップ時のスタイル（:activeとかで指定）がある場合には、 出てこないで欲しい場合もあります。

黒い半透明な背景を変更するCSS

以下のCSSを用いることで、リンクやボタンのタップ時の色を変更することが出来ます。

-webkit-tap-highlight-color:rgba(0,0,0,0);

上記の例だと、完全透明にして、タップ時に黒い半透明な背景を表示しないようになります。
rgbaの値を変更することで、他の色を設定する事も可能です。

なおAndroidでは、タップハイライトカラーを透明は出来るようですが、別の色に指定する事は難しいようです。

参考資料

以下の資料に正式な説明が掲載されています（内容はスゴく少ないですが）。ご参考ください。
http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safaricssref/articles/standardcssproperties.html

最後に

最近のスマホ用ページのマークアップ関連のお仕事をしていて、今回の内容を知りました。
マークアップを生業にしている人は、こーゆう知識を一杯持っていてスゴいなぁと思う今日この頃。自分も少しずつ 良い知識を学んではブログに書いていけたらと思っています。

最後までご覧頂きましてありがとうございました(*´∇｀*)