35

私は現在ウェブサイトで作業しており、テキスト選択の色を変更したいと考えています。

私はそれがいくらか働いています。これは私のスタイルシートのコード (の一部) です:

::selection {
  background: #FF0099;
  color: black;
  text-shadow: none;
}

::-moz-selection {
  background: #FF0099;
  color: black;
  text-shadow: none;
}

おおむね満足のいく結果が得られます。ただし、場合によっては、次の図に示すように、強調表示が (#FF099 の) 指定された色を失うように見えることがあります。

ウェブサイトの写真

上の図でわかるように、テキストは正しい色 (#FF099) を使用して完全に強調表示されています。ただし、本文テキストとタイトルの間、および本文テキストの左側の領域は、デフォルトの色 (青色) で強調表示されます。ハイライトの一部がデフォルトに戻らないようにするにはどうすればよいですか?

編集: http://i.imgur.com/NmZIf.pngで利用可能な大きな画像

スニペット:

::selection {
    background: #FF0099;
    color: black;
    text-shadow: none;
}

::-moz-selection {
    background: #FF0099;
    color: #EEE;
    text-shadow: none;
}
<p>sample</p>
<br />
<p>sample2</p>

4

7 に答える 7

12

私は以前にこの問題をさまよいましたが、判明しました：

::selection (or whatever selection you might use)

改行タグ (br) では機能しません。それらを削除し、代わりにマージンを使用してください。=) デモンストレーションするフィドルを次に示します。

于 2012-05-14T07:26:12.643 に答える
7 
/*** Works on common browsers ***/
::selection {
    background-color: #352e7e;
    color: #fff;
}

/*** Mozilla based browsers ***/
::-moz-selection {
    background-color: #352e7e;
    color: #fff;
}

/***For Other Browsers ***/
::-o-selection {
    background-color: #352e7e;
    color: #fff;
}

::-ms-selection {
    background-color: #352e7e;
    color: #fff;
}

/*** For Webkit ***/
::-webkit-selection {
    background-color: #352e7e;
    color: #fff;
}
于 2015-10-01T10:40:09.893 に答える
0

以下のコードをお勧めします。試してみましたが、正常に動作しています。

::selection
{
    background: #FF0099;
    color: black;
    text-shadow: none;
}
::-moz-selection
{
    background: #FF0099;
    color: #EEE;
    text-shadow: none;
}
p
{
    margin-bottom: 50px;
}
于 2015-05-05T13:05:21.753 に答える
0

::selectionCSS セレクターを使用できます。これは、ユーザーが選択したすべてのテキストに一致します。CSS3 仕様の一部ではありませんが、IE9+、Opera、Google Chrome、および Safari でサポートされています。Firefox は接頭辞付きの::-moz-selection.

詳細と例: http://www.snippetsource.net/Snippet/86/change-color-of-selected-text

于 2014-07-06T14:14:32.237 に答える
0

あなたの要素<br />をマージンに置き換えてみてください。<p>

ここに作業がありますFiddle Demo

HTML

<p>sample</p>
<p>sample2</p>

CSS

p {margin-bottom:50px;}
::selection {
    background: #FF0099;
    color: black;
    text-shadow: none;
}
::-moz-selection {
    background: #FF0099;
    color: #EEE;
    text-shadow: none;
}
于 2014-07-06T14:45:21.480 に答える
0

私は同じ問題を抱えていました。

本当にこれが必要な場合は、問題が発生している要素 (::selection ではない) で実行できることがいくつかあります。

div {
    position: relative; /*Use it as much as you can*/
    height: 100px; /* or max-height instead of margin or br */
    line-height: normal; /* keep line-height normal*/
    -webkit-transform: translate(0px,0px); /* This hack can work */
    -moz-transform: translate(0px,0px); /* hack moz */
    transform: translate(0px,0px); /* hack prefixless */
}
于 2013-03-06T09:15:00.733 に答える