CSS3を使用してテキストのデフォルトの色を変更するselection_html/css_WEB-ITnose

1. ブラウザで選択されたテキストの色について

私のシステム (XP のデフォルトテーマ) を例に挙げると、ブラウザページでテキストを選択した後のデフォルトの背景色です。は青です。ブラウザによって色は多少異なりますが、ほぼ同じで、Firefox3.6 ブラウザから取得した下の図に示すように、テキストの色はほぼ白です。

CSS3 の親たち ブラインドデートで会う前は、ページ上のテキストを選択した後に背景色とテキストの色を変更するのは、宦官に子供を産むように頼むのと同じくらい困難でした。しかし、CSS3 が登場し、より多くのブラウザで認識されるようになると、すべてがとても自然に思えてきました。一部の頑固な古い人たち (IE ブラウザなど) はまだこの新しい CSS3 を認識していませんが、これは他のブラウザでの UI の改善には影響しません。

現在、Firefox、Safari、Chrome、および Opera ブラウザーはすべてテキスト選択属性をサポートしています。ブラウザーがこの属性をサポートしていない場合は、単に無視されるため、悪影響はありません。

以下は、UI エクスペリエンスを向上させるためのこの小さなトリックの簡単なデモンストレーションです。

2. デフォルトの選択色を変更します

まず、簡単な例として、次のようにページ全体のテキスト選択の基本スタイルを設定します。 🎜>それで、下の図に示すように、Chrome ブラウザから取得したテキスト「選択されたデフォルトの青色の背景」が明るい灰色に変わりました:

::selection {    background:#d3d3d3;    color:#555;}::-moz-selection {    background:#d3d3d3;    color:#555;}::-webkit-selection {    background:#d3d3d3;    color:#555;}

もちろん、CSS を使用することもできます。セレクターを使用して、選択する特定のラベル コンテンツ テキストを指定します。以下に示す栗色の選択状態など、最終的なスタイル状態では、次の図のような効果が得られます。

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

.maroon::selection {    background:maroon;    color:#fff;}.maroon::-moz-selection {    background:maroon;    color:#fff;}.maroon::-webkit-selection {    background:maroon;    color:#fff;}

インターネット ソース: CSS3 を使用してテキスト選択のデフォルトの色を変更する | Bobcat のブログ