::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;
}

試してみましょう

利用できるプロパティ

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

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

構文

css
/* 従来の Firefox の構文 (バージョン 61 以前) */
::-moz-selection

Error: could not find syntax for this item

HTML

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

CSS

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 で再導入されています。

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
::selection
Supports the text-decoration property

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

関連情報

  • pointer-events - 要素でどのイベントが有効かを制御する