[CSS] テキスト選択時の文字色・背景色を設定する

web
対応ブラウザ 対応 対応(-moz-) 9~ 対応 未対応 4.4~

テキストを選択(反転)した時のスタイルを指定するには、::selection擬似要素を使用します。
Firefoxは、ベンダープレフィックス付きの::-moz-selectionを指定しないと適用されないので注意してください。
IE8以下は未対応のため、指定してもデフォルトのスタイルで表示されます。

::selectionの使い方

::selection {
    background: #000;
    color: #fff;
}

//Firefox
::-moz-selection {
    background: #000;
    color: #fff;
}

要素を指定しなければサイト全体に適用されます。

.example::selection {
    background: #000;
    color: #fff;
}

要素やクラスを指定すると、その範囲のみ適用されます。

::selectionで使用できるプロパティ

Only a small subset of CSS properties can be used in a rule using ::selection in its selector: color, background-color, cursor, outline, text-decoration, text-emphasis-color and text-shadow. Note that, in particular, background-image is ignored, like any other property.

::selection CSS | MDN
::selectionでは、colorbackground及びbackground-colortext-decorationtext-shadowぐらいしか効かないみたいです。
そして、backgroundに画像を指定しても効かないっぽい。
cursoroutlinetext-emphasis-colorは使いどころがよくわからない。

よく使うプロパティ

使用できるプロパティ
よく使うプロパティ

backgroundで選択時の背景色、colorで文字色が変更できます。
background: none;にすると、背景がなくなるため、選択時に文字色のみ変わるデザインにすることができます
text-shadowは、選択時に影をつけたり、元々ついていた影を消したり、色を変えたりなど。

応用編

応用編として、ボカされていて読めないテキストを選択するとボカシが解除されるという、使いどころの分からないものを作ってみましょう。
デモはこちら

p {
    color: transparent;
    text-shadow: 0 0 8px #000;
}
::selection {
    background: none;
    color: #000;
    text-shadow: none;
}

P要素のcolorの値をtransparentとすることでテキストを透明にします。
そして、text-shadow0 0 8px #000とし、読めないようにぼかしておく。
::selectionbackgroundtext-shadownoneにしておく。
透明なテキストに影をつけることで、表面上は影のみが表示され、テキストがぼけたように見えるという仕組みです。

注意点

Though this pseudo-element was in drafts of CSS Selectors Level 3, it was removed during the Candidate Recommendation phase, as it appeared that its behavior was under-specified, especially with nested elements, and interoperability wasn’t achieved (based on discussion in the W3C Style mailing list).

::selection CSS | MDN

::selectionはCSS3の草案には盛り込まれていたものの、勧告候補段階で削除された云々と書いてあります(たぶん)。
CSS3の標準仕様ではない、ということっぽい。
が、これを指定しているからといって特に害はないので、クライアント案件で使っても問題はないでしょう。

目次へ戻る