【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年目。

前は東京都の京王線沿線に。
その前は神戸の三宮に。
その前は名古屋の八事霊園の近くに住んでいました。

ある年の冬、車で島根県へ旅行に出かけました。
同県の山中にある寒村をゆるゆると走っていると地面が凍結しており
車ごと川に滑り落ちそうになった経験を持つ30代(男)です。

フロントエンドを始めて9年目になります。
最近は、ずっとwordpressをいじっており
エディタはVSCodeに乗り換え、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

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

コメント

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