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

HTML/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です。

一言

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

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

最後に一言

選択範囲って操作の名前を思い出すのにすごく時間かかりました・・・。マウスクリックしてガーっと引き伸ばすって認識だけだとダメですね・・・。

この記事をSNSでシェアする?

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


  • このエントリーをはてなブックマークに追加
  • Pocket