::selection

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

::selection は CSS の擬似要素で、ユーザーが (テキストをマウスでクリックやドラッグすることで) 選択した文書の一部にスタイルを適用します。

css

::selection { background-color: cyan; }

試してみましょう

p::selection { color: red; background-color: yellow; }

<p> Select a fragment of this paragraph, to see how its appearance is affected. </p>

利用できるプロパティ

::selection 擬似要素では、特定の CSS プロパティのみが利用できます。

color
background-color
text-decoration および関連プロパティ
text-shadow
stroke-color, fill-color, stroke-width

特に、 background-image は無視されます。

構文

css

/* 従来の Firefox の構文 (バージョン 61 以前) */ ::-moz-selection Error: could not find syntax for this item

例

HTML

html

この文字列は選択すると特殊なスタイルになります。 <p>こちらの段落も文字列を選択してみてください。</p>

CSS

::-moz-selection { color: gold; background-color: red; } p::-moz-selection { color: white; background-color: blue; }

css

/* 選択されたテキストを赤の背景に金色とする */ ::selection { color: gold; background-color: red; } /* 選択されたテキストを青の背景に白とする */ p::selection { color: white; background-color: blue; }

アクセシビリティの考慮

純粋に美的な理由により、選択されたテキストのスタイルを上書きしないでください。 — ユーザーは必要に応じてカスタマイズすることができます。認知の問題を抱えている人や、技術的な知識に弱い人にとって、予期せず選択のスタイルが変更されると、機能の理解が妨げられる可能性があります。

上書きする場合は、選択部分のテキストと背景の色のコントラスト比が、弱視の人でも読める程度に高いことを確認することが重要です。

色のコントラスト比は、プレイスホルダーの文字列と入力欄の背景色の値とを比較することで決定されます。現在のウェブコンテンツアクセシビリティガイドライン (Web Content Accessibility Guidelines, WCAG) によれば、文字列コンテンツで 4.5:1 以上、見出しのような大きめの文字列で 3:1 以上のコントラスト比が求められています。 (WCAG は、大きめの文字列とは、太字ならば 18.66px 以上、または 24px 以上と定義しています。)

仕様書

Specification
CSS Pseudo-Elements Module Level 4 # selectordef-selection

メモ: ::selection は CSS Selectors Level 3 の草稿にはありましたが、 (特に要素がネストされた場合の) 動作の仕様化が途中であることや相互運用性が確保されなかったこと (W3C Style mailing list での議論に基づく)から、勧告の過程で削除されました。これは Pseudo-Elements Level 4 で再導入されています。