2011-08-03 27 views
7

ブラウザでテキストを選択すると、選択されているテキストの背後にある背景のほとんどが青色に変わります。この色を別の色に変更するには?選択の色を変更します。

答えて

10

selection疑似要素を探しています。

::-moz-selection{ background: #000; color:#fff;} 
::selection { background:#000; color:#fff; } 

また、メモとして。サイトでテキストシャドウを使用する予定がある場合は、::selectionスタイリングにtext-shadow:none;を追加することをおすすめします。 thisフィドルで見ることができるように、目には本当に難しいです。

+0

をお試しくださいあなたは正しい名前「擬似要素」を使用している場合、それは簡単に言うことにします。 – BoltClock

+0

これはIE <9では動作しないことに注意してください。 –

+0

@BoltClockああ、あまり面白くないXD。それでも、正しい言葉に変更してください。 – Moses

7

このような何かそう... ...

http://css-tricks.com/490-overriding-the-default-text-selection-color-with-css/

を、この記事を見てみましょう:

p.moz::-moz-selection { 
    background:#cc0000; 
    color:#fff; 
} 

p.webkit::-webkit-selection { 
    background:#cc0000; 
    color:#fff; 
} 

p.normal::selection { 
    background:#cc0000; 
    color:#fff; 
} 

私はこのことができます願っています。
フリスト

+0

CSSカスケードなので、ベンダーのプレフィックス付きセレクタを "標準化された"セレクタの上に置くようにしてください。そうしないと、将来のブラウザは標準化されたバージョンのサポートを追加したとしても、依然として独自のベンダー実装にデフォルト設定されます。 – Moses

+0

@Moses ...あなたが何を意味するのか分かりません。 – Hristo

+0

ベンダープレフィックスは、ブラウザがW3Cによって正式に標準化される前に機能を実装する手段として存在します。しかし、いったん正式な標準が存在すると、将来のブラウザにプレフィックスを要求する理由はありません。あなたのコードを使うと、ブラウザはまず標準化された ':: selection'を見つけ、後でスタイルシートで' :: - moz-selection'を見ます。ブラウザは両方を理解しているので、最後に遭遇したため、ブラウザは2番目のブラウザを選択します。古いバージョンではなく、新しく標準化された実装を使用する可能性が高いため、これは悪いことです。 – Moses

2

この

::selection 
{ 
background:#999; 
color:#fff; 
}