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