選択時の文字色や背景色を変更する

オシャレな小技シリーズ

WEBサイトのテキスト部分の可視性をアップしてくれるCSSテクニック。
そのサイトのテーマカラーに合わせてみたり、デザインの統一感が出て、
とても簡単に実装できるのでおすすめです。

【CSS】

::selection {
	background: ##1e73be; /* Safari用 */
}
::-moz-selection {
	background: ##1e73be; /* Firefox用 */
}

::selection {

background: ##1e73be; /* Safari用 */

}

::-moz-selection {

background: ##1e73be; /* Firefox用 */

}

このコードをCSSファイルに記述するだけ！
カラーはお好みのものに差し替えるだけです。

ちなみに、選択時に背景色を変えるだけじゃなく、文字色も変更できます。

【CSS】

::selection {
	color: #1e73be; /* Safari用の選択時の文字色 */
}
::-moz-selection {
	color: #1e73be; /* Firefox用の選択時の文字色 */
}

::selection {

color: #1e73be; /* Safari用の選択時の文字色 */

}

::-moz-selection {

color: #1e73be; /* Firefox用の選択時の文字色 */

}

擬似要素なので、直前にclass名などを追加することも可能です。

【CSS】

p::selection {
background: #000fff;
}
p::-moz-selection {
background: #000fff;
}

p::selection {

background: #000fff;

}

p::-moz-selection {

background: #000fff;

}

ここで注意しないといけないのは
以下の４つのプロパティにしか適用されないという事です。

以上です。簡単なのでぜひやってみてください。

DETAIL NOTE