上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
Comments
Post a Comment
管理人にだけ表示を許可する
コメント投稿時いったん画像認証のページへ移動します。
スパム・コメントが止まないもんで、面倒おかけします。 m(_ _)m

ウェブで、テキストを選択した時の色について

ウェブサイトのテキストをマウスでドラッグして選択
した時の、背景と文字の色について。

 

 デフォルトの色。 初期値。 既定値。

 
背景色 #3399ff  文字色 #ffffff

背景色 #3399ff 文字色 #ffffff  または、これが反転した

背景色 #ffffff  文字色 #3399ff

背景色 #ffffff 文字色 #3399ff

Firefox ESR 31 、IE 11 、Opera 12 でデフォルト色は同じでした。
Chrome や Safari は入れてないので調べてません。

 
色を変更する CSS 。 擬似要素セレクタの selection 。

*::selection {
	background-color: #3399ff;
	color: #ffffff;
}

/* Firefox 用 */
*::-moz-selection {
	background-color: #3399ff;
	color: #ffffff;
}

この例ではアスタリスク * を用い、全体にかけてます。

関連リンク: 疑似クラスと擬似要素の違い、コロンの数 - 3streamer blog

 
よく見るサイトが、この色を変更したので、うわっうぜえ、と思い調べました。
やめろショッカー! わ ざ わ ざ 淡い色に変えて難読化するのは!

 

 

 テキスト選択時の色は、どこで反転するのか?

 
テキスト選択時の色は、もとの背景色などによって反転するのですが、
その境界地点はどこなんだろ? と思ってしまったので調べてみました。 中途半端に。

Firefox、IE、Opera で、グレイ・スケール(白黒)のみで。

ここからは実際にドラッグしてみてください。

 
Firefox

#ffffff から暗くしていって #c2c2c2 で反転しました。

background-color: #c3c3c3;  color: #000000;
background-color: #c2c2c2;  color: #000000;

なるほど #c3c3c3 より暗いと反転するのだな。
と思ったら #0d0d0d からまた反転しました。 なんでや。

background-color: #0e0e0e;  color: #ffffff;
background-color: #0d0d0d;  color: #ffffff;

 
IE 11

IE は、背景色ではなく文字色でした。 #ffffff から暗くしていって #aaaaaa で反転。

background-color: #000000;  color: #ababab;
background-color: #000000;  color: #aaaaaa;

 
Opera

Opera は、反転しなかった。
ふーん、と思ったんですが、じゃあ選択時の反転色と同じにしたら?

background-color: #ffffff;  color: #000000;
background-color: #3399ff;  color: #ffffff;

反転しない! これアカンのやないか?

 

と、中途半端ですが、ここまで。

検索すればフルカラー含めてもっとちゃんと書いてあるサイトあるのかな?
ま、全容解明したところでそれを活用するアテなど全くないですけどね。

ただの疑問の解消なので。 大変そうだしこれ以上はいいや。 満足しました。

 

関連記事:
Comments
Post a Comment
管理人にだけ表示を許可する
コメント投稿時いったん画像認証のページへ移動します。
スパム・コメントが止まないもんで、面倒おかけします。 m(_ _)m
 
カテゴリ

 
 町山智浩ポッドキャストまとめ
 
 iGain
 
 全記事タイトル一覧
 
iTunes Store へのリンクについて
プライバシーについて

リンク

Mozilla Firefox ブラウザ無料ダウンロード

にほんブログ村 IT技術ブログ フリーソフトへ
 
Photo by
EyesPic - フリー画像素材

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。