1. ホーム
  2. CSS

【CSS】::selection の使い方｜テキストを選択したときの色を変える方法

Share

Web ページの文字をマウスでドラッグして選択すると、多くのブラウザでは青っぽい背景と白い文字で反転表示されます。この「選択したときの色」は CSS の ::selection 擬似要素で自由に変えられます。この記事では、::selection の基本の書き方から、要素ごとに色を変える方法、指定できるプロパティの制限、うまく効かないときの原因までを、実際に選択して試せるデモを交えて解説します。

::selection はテキスト選択時の見た目を変える擬似要素

::selection は、ユーザーがドラッグやダブルクリックで選択（ハイライト）した部分にだけ適用されるスタイルを指定するための擬似要素です。擬似要素とは、要素の一部（ここでは「選択された範囲」）を仮想的な要素として扱い、そこにスタイルを当てられる仕組みのことです。ブラウザ標準の反転色をサイトのブランドカラーに合わせたいときなどに使います。

基本の書き方は、セレクタに ::selection を付けて背景色と文字色を指定するだけです。

style.css
/* ページ全体で選択したときの色を変える */
::selection {
  background: #ffb300; /* 選択部分の背景色 */
  color: #ffffff;      /* 選択部分の文字色 */
}

セレクタを付けずに ::selection とだけ書くと、ページ内のすべての選択に適用されます。.article ::selection のように前に別のセレクタを付ければ、その要素の中の選択だけに限定できます。

要素ごとに選択色を変える

見出しと本文で選択色を変えたい、といった場合は、要素のセレクタに続けて ::selection を書きます。下のデモは、段落を選択するとオレンジ、見出しを選択すると青の背景になるように指定したものです。テキストをドラッグして選択してみてください。CSS タブの色コードを書き換えると、選択色が変わるのを確認できます。

<div class="box">
  <h2>この見出しを選択してみてください</h2>
  <p>この段落のテキストをマウスでドラッグして選択すると、選択した部分の文字色と背景色が変わります。::selection で選択時の見た目を指定しています。見出しと段落で色を変えることもできます。</p>
</div>

.box {
  padding: 24px;
  font-family: sans-serif;
  line-height: 1.9;
}

/* ページ全体の選択時のスタイル */
::selection {
  background: #ffb300; /* 選択部分の背景色 */
  color: #ffffff;      /* 選択部分の文字色 */
}

/* 見出しだけ別の色にする */
.box h2::selection {
  background: #3b7bff;
  color: #ffffff;
}
Preview

指定できるプロパティは限られている

::selection には、どんな CSS プロパティでも指定できるわけではありません。仕様で使えるプロパティが限定されており、選択範囲のサイズや配置を変えるようなことはできない仕組みになっています。主に使えるのは次のプロパティです。

プロパティ効果
color選択部分の文字色
background-color選択部分の背景色
text-decoration下線・取り消し線などの装飾
text-shadow文字の影

margin や padding、font-size などを指定しても無視されます。「選択部分の色と装飾を変えるためのもの」と割り切って使うのがコツです。なお、background は一括指定プロパティですが、色以外（画像など）は反映されないため、実質は背景色を指定していることになります。

選択色が変わらないときに見直すこと

背景色だけ指定して文字が読めなくなる

background-color だけを濃い色にして color を指定し忘れると、文字色が元のままで背景と同化し、選択した文字が読めなくなることがあります。背景色を変えるときは、その上で読めるように color もセットで指定するのが基本です。

半透明の背景色にしていない

選択の背景色を不透明な色にすると、画像やグラデーションの上で下地が完全に隠れてしまいます。文字だけを反転させたいときは rgba() などで半透明にすると、下の内容を透かしつつ選択部分を示せます。用途に応じて不透明・半透明を使い分けましょう。

ベンダープレフィックスが必要な環境

現在の主要ブラウザは ::selection をそのまま解釈しますが、古い Firefox では ::-moz-selection という接頭辞付きの記述が必要でした。今から書くなら基本は ::selection だけで問題ありませんが、幅広い環境に配慮する場合は、同じスタイルを ::-moz-selection にも書いておくと安心です。ただし2つのセレクタをカンマでまとめて書くと、片方を認識しないブラウザがルール全体を無視することがあるため、別々のルールとして分けて書くのが安全です。

まとめ

::selection は、テキストを選択したときの見た目をサイトに合わせて変えられる擬似要素です。::selection 単体でページ全体に、要素セレクタと組み合わせれば特定の箇所だけに適用できます。指定できるのは color・background-color・text-decoration・text-shadow など色と装飾に関するプロパティに限られる点を押さえておきましょう。背景色を変えるときは文字色もセットで指定し、読みやすさを損なわないようにするのがきれいに仕上げるポイントです。

参考ページ