64

私はこれをウェブ全体で探していましたが、解決策は言うまでもなく、これを尋ねても他の人を見つけることさえできません...

テキストが選択されているときに、テキスト入力内のハイライト領域の色を変更する方法はありますか? ハイライトの境界や背景ではなく、実際にテキストを選択したときにテキストの周囲に表示される部分です。

4

10 に答える 10

50

これを探している場合：

代替テキスト

リンクは次のとおりです。

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

于 2010-02-13T18:58:03.097 に答える
35

これがコードです。

/*** 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;
}
于 2014-05-15T14:57:24.573 に答える
21

これは古い質問だと思いますが、これに出くわした人は誰でも、このJSFiddlecontenteditableに示されているようにこれを使用して行うことができます。

コメントでこれに言及したアレックスへの称賛（私は今までそれを見ませんでした！）

于 2013-01-24T16:46:03.353 に答える
11

ここでのすべての答えは、::selection疑似要素とその仕組みに関しては正しいです。ただし、質問は実際には、テキスト入力での使用方法を具体的に尋ねています。

これを行う唯一の方法は、入力の親を介してルールを適用することです (それに関しては任意の親):

.parent ::-webkit-selection, [contenteditable]::-webkit-selection {
	background: #ffb7b7;
}

.parent ::-moz-selection, [contenteditable]::-moz-selection {
	background: #ffb7b7;
}

.parent ::selection, [contenteditable]::selection {
	background: #ffb7b7;
}

/* Aesthetics */
input, [contenteditable] {
  border:1px solid black;
  display:inline-block;
  width: 150px;
  height: 20px;
  line-height: 20px;
  padding: 3px;
}
<span class="parent"><input type="text" value="Input" /></span>
<span contenteditable>Content Editable</span>

于 2016-02-21T14:04:25.983 に答える
1

@マイク・エン、

テキストの背景色を選択すると、 ::selection を使用してテキストの色を変更できます。::selectionはクロムで機能することに注意してください。Firefox ベースのブラウザーで機能させるには、これを試してください::-moz-selection

reset.css または効果を適用したい css ページで、次のコード スニペットを試してください。

::selection{
   //Works only for the chrome browsers
   background-color: #CFCFCF; //This turns the background color to Gray
   color: #000; // This turns the selected font color to Black
}

::-moz-selection{
   //Works for the firefox based browsers
   background-color: #CFCFCF; //This turns the background color to Gray
   color: #000; // This turns the selected font color to Black
}

上記のコードは、入力ボックスでも機能します。

于 2014-03-05T06:04:28.947 に答える
0

リンクをありがとうございますが、実際のテキストの強調表示が公開されていないように見えます。

手元にある実際の問題に関しては、テキスト入力の必要性を完全に排除し、JavaScriptでinnerHTMLを使用することで、別のアプローチを選択することになりました。テキストの強調表示を回避するだけでなく、実際にははるかにきれいに見えます。

HTMLフォームコントロールに対するこのきめ細かい調整は、フォームコントロールを完全に排除するためのもう1つの良い議論です。はは！

于 2010-02-15T16:59:10.257 に答える
-1

このコードを使用してみてください:

/* For Mozile Firefox Browser */

::-moz-selection { background-color: #4CAF50; }

/* For Other Browser*/
::selection { background-color: #4CAF50; }
于 2016-10-25T12:49:33.307 に答える
-5

これが役立つと思います：

選択スタイル

ユーザーが選択したテキストの色と背景を定義することができます。

以下で試してみてください。何かを選択すると、このように表示されます。ブラウザは選択スタイルをサポートしています。

の段落normal ::selectionです。

の段落::-moz-selectionです。

の段落::-webkit-selectionです。

テストシート:

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

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

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

Quirksmodeより引用

于 2011-09-01T13:46:57.567 に答える