[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
では、color
とbackground
及びbackground-color
、text-decoration
、text-shadow
ぐらいしか効かないみたいです。
そして、background
に画像を指定しても効かないっぽい。
よく使うプロパティ
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-shadow
は0 0 8px #000
とし、読めないようにぼかしておく。
::selection
はbackground
とtext-shadow
をnone
にしておく。
透明なテキストに影をつけることで、表面上は影のみが表示され、テキストがぼけたように見えるという仕組みです。
注意点
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
はCSS3の草案には盛り込まれていたものの、勧告候補段階で削除された云々と書いてあります(たぶん)。
CSS3の標準仕様ではない、ということっぽい。
が、これを指定しているからといって特に害はないので、クライアント案件で使っても問題はないでしょう。