::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 プロパティのみが利用できます。

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

ブラウザーの互換性

BCD tables only load in the browser