デフォルトのテキストの色を変更するCSSメソッドselection_html/css_WEB-ITnose

このページのテキストを選択してご覧ください: http://hovertree.com/h/bjaf/38hq6y9d.htm


通常、Web ページ内のテキストをマウスで選択すると青色になります。このデフォルトの色も変更できます。この記事では、CSS3 を使用してデフォルトのテキスト選択の色を変更する方法を学びます。
私のシステム（XPのデフォルトテーマ）を例にとると、ブラウザでページテキストを選択した後のデフォルトの背景色は青です。ブラウザごとに色は若干異なりますが、ほぼ同じで、テキストの色もほぼ同じです。白。

1. ブラウザのテキスト選択の色について:
CSS3 の父と母がまだブラインドデートで会っていない前は、ページ上でテキストを選択した後に背景色とテキストの色を変更するのは、宦官に頼むのと同じくらい困難でした。子供を産む。しかし、CSS3 が登場し、より多くのブラウザで認識されるようになると、すべてがとても自然に思えてきました。一部の頑固な古い人たち (IE ブラウザなど) はまだこの新しい CSS3 を認識していませんが、他のブラウザの UI の改善には影響しません。
現在、Firefox、Safari、Chrome、Opera ブラウザはすべてテキスト選択属性をサポートしています。ブラウザがこの属性をサポートしていない場合は、直接無視されるため、悪影響はありません。 UI エクスペリエンスを向上させるためのこの小さなトリックを簡単に紹介しましょう。 by He Wenqi

2. デフォルトの選択色を変更します:
まず、簡単な例として、次のようにページ全体のテキスト選択の基本スタイルを設定できます:

::selection { background:deeppink; color:lightgreen; } ::-moz-selection { background:deeppink; color:lightgreen; } ::-webkit-selection { background:deeppink; color:lightgreen;}

同様に、あなたは必要に応じて、CSS セレクターや、対応するコンテンツのテキスト/画像の選択スタイルなどを指定します。ここでは 1 つずつ例を示しません。

3. 結論:
この記事は、実際の作業で使用するかどうかは、個人的な Web サイトの場合、決して使用しません。ウェブサイトまたはデザイン このようなウェブサイトは、ウェブサイトを輝かせるためにこの属性を使用する可能性が非常に高くなります。もちろん、ページ再構築のプロセスでは誰もが異なることに焦点を当てているため、:selection に対する私の態度は私の個人的な観点を表しているだけです。


コード:

例 2:

c9ccee2e6ea535a969eb3f532ad9fe89
::selection {background:deeppink; color:white; } ::-webkit-selection {background:deeppink; color:white;}531ac245ce3e4fe3d50054a55f265927

転載元: http://hovertree.com/h/bjaf/38hq6y9d.htm He Wenqi