スマホのリンクタップ時・パソコンのテキスト選択範囲時のハイライトカラーを変更するcssコード

web制作時の備忘録メモです。スマホでリンクをタップした時の色、またパソコンでテキストなどマウスで選択範囲した時の色を変更する、cssコードを以下にまとめておきます。

ソースコード

スマホでハイライトカラーを変更するなら、こちら。

-webkit-tap-highlight-color:#eee;
tap-highlight-color:#eee;

パソコンでテキストの選択範囲をした時の背景カラーを変更するなら、こちら。

::selection{background:#eee;}
::-moz-selection{background:#eee;}

なお、無効化する時は、色部分を「rgba(0,0,0,0);」にすればOKです。

スマホでタップした際、色が表示されないようにすると、カッコイイ感じもありますが、ボタンリンクなどは良いとしても、テキストリンクなどは文字色によっては、タップした時にハイライトカラーを表示しないと、触ったかどうか、よくわからずにページ遷移する印象があって、あんまり好きじゃないです。

さておき、せっかく作るウェブサイトですので、細かい部分でもデザインのこだわりを発揮していきたいところです。