【CSS】テキストを選択した時の背景や文字色を変更する方法

この記事は約2分で読めます。
広告

カーソルで文字を選択した時、なにも指定しないと青い背景で白文字になるけど、サイトのカラーに合わないなぁと思ったら変えよう!
ページ全体を同じ感じにするときは、CSSで「::selection」の中に選択した時のスタイルを記述します。

// サイト全体に指定する時
::selection {
  background: #34ffd0;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,.3);
}
// 個別に指定する時
.demo p::selection {
  background: #34ffd0;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,.3);
}

では、まずデモの確認を。
デモ内の文字をカーソルで選択すると変化します。

デモ

この文字を選択すると、背景色が変わります

この文字を選択すると、文字色が変わります

この文字を選択すると、テキストシャドーが付きます

全部を合わせると良い感じになります。

デモで選択時に背景画像を引いて読みづらいの作ってみようと思ったらできませんでした。
CSSだけで色々やろうと思うとやっぱり無理があるみたい。

合わせてチェックしてね!

疑似クラスで最初、最後、n番目や奇数、偶数を指定|CSS
ホバーで変化するテキストの作り方|CSS
【jQuery】選択した場所の「値」取得方法

エンデ・バタローをフォローする
CSSサイト制作

埼玉県北本市に越してきて2年と少しになります。以前は東京都の京王線沿線に、その前は神戸の三宮、さらにその前は名古屋の八事霊園近くに住んでいました。

怖い話が大好きで、ネット怪談、ホラー小説、心霊Youtuber(オウマガドキch、ゾゾゾ)を寝る前のお供にしてます。

フロントエンドエンジニアとして9年目のキャリアを積んでおり、figma、Illustrator、Photoshop、WordPress、HTML、CSS(scss)、JavaScript(jQuery)、PHPなど使って日々仕事をしています。

仕事で検索する手間を省くためフロントエンド技術に関するブログを書いています。

エンデ・バタローをフォローする
広告
初めてのブログ

コメント

タイトルとURLをコピーしました