CSS | 選択テキストのスタイルを変更する方法

CSS,CSS テキスト

CSSの疑似要素「::selection」を利用してでユーザーが選択したテキスト、選択テキストのスタイルを変更する方法を紹介しています。

::selectionで指定可能なプロパティ

疑似要素「::selection」は選択テキストのスタイルを変更しますが、指定可能なプロパティに制限が設けられています。

指定可能なプロパティは以下の4点となります。

  • color
  • background-color
  • text-decoration
  • text-shadow

選択テキストのスタイルを変更する

疑似要素「::selection」で選択テキストのスタイルを変更するCSSの動作サンプルとサンプルコードになります。

See the Pen CSS | Expansion and Contraction Text 01 by yochans (@yochans) on CodePen.

疑似要素「::selection」で指定可能な値のうち、「text-decoration」がうまく機能しなかったので「color」「background-color」「text-shadow」を使ったサンプルのみ紹介しています。

<p>Default</p>
<p class="color">Color</p>
<p class="text-shadow">text-shadow</p>

疑似要素「::selection」には許可されていないプロパティを記述すると、選択テキストが機能しなくなる事が多いですので、必要以外のものは記述しないようにしておいた方が良いです。

.color::selection {
	background-color: #000;
	color: #FFF;
}

.text-shadow::selection {
	text-shadow: 0 0 5px #000080;
}

CSS,CSS テキスト

Posted by Yousuke.U