CSSで文字を選択時の色を変更

文字を選択して反転状態にした時、ChocoThemeのテーマに変更してからbackgroundとの関係なのか背景が白なのに選択しても青字に白の背景で選択範囲がわかりづらかった。

googleで調べてみると反転する色や文字の色を直接変更できることがわかったので書き残しときます。

やり方は2通りで両方とも編集するのはstyle.cssファイル。

CSSでOSシステムカラーを利用する方法

background: Highlight;
color: InactiveBorder;

これは試してないですが、想像するに見慣れた青の背景に白文字のやつになるのではないかと・・・。

OSに依存するということなので、色が違う人も出てくると思います。

CSSで色を指定する方法

色を指定した方が見栄えがよさそうってわけで

::selection {
    background: #ffb7b7; /* Safari */
}
::-moz-selection {
    background: #ffb7b7; /* Firefox */
}

赤の部分は好きな色のコード。
青の部分はコメントアウトなのでなくてもいいです。

-moz-selectionは実験的に導入されているMozillaのUI（ユーザーインターフェース）独自の拡張プロパティなので、いつ変更で使えなくなるかは不明なので注意。

引用、参考サイト

文字を選択した時の色＋文字選択時のコネタ – kokemonoの日記
クロスブラウザのためのCSSのテクニック10選「10 astonishing CSS hacks and techniques」 | DesignDevelop