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

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】選択した場所の「値」取得方法

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

東京に住み始めて4年目。

前は神戸に。その前は名古屋に住んでいました。

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

フロントエンドを始めて4年目になります。
エディタはAtomを利用して、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

エンデ・バタローをフォローする
シェアする
スポンサーリンク
初めてのブログ

コメント

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