web-dev-qa-db-ja.com

HTMLテキスト入力でテキストを選択する際のハイライト色の変更

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

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

htmlcsstextinputhighlight
53
Eric

リンクをお寄せいただきありがとうございますが、実際のテキストのハイライトが表示されていないようです。

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

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

0
Eric

これを探しているなら：

alt text

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

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

43
Sarfraz

これがコードです。

/*** 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;
}
28
Conspiria

これは古い質問であることに気づきましたが、この問題に遭遇した人は、示されているようにcontenteditableを使用してこれを行うことができます このJSFiddleで 。

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

20
jaypeagi

ここでのすべての回答は、::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>
8
pilau

ここに摩擦があります：

    :: selection {
 background：＃ffb7b7;/* WebKit/Blink Browsers/ 
} 
 ::-moz-selection {
 background：＃ffb7b7; /Geckoブラウザ*/
}

私がしたことは、異なるクラスの段落に異なる選択色を使用することだけでした：

    p.red::selection {
 background：＃ffb7b7; 
} 
 p.red::-moz-selection {
 background：＃ffb7b7; 
} 
 p.blue::selection {
 background：＃a8d1ff; 
} 
 p.blue::-moz-selection {
 background：＃a8d1ff; 
} 
 p.yellow :: selection {
 background：＃fff2a8; 
} 
 p.yellow： ：-moz-selection {
 background：＃fff2a8; 
}
<pre>/* Combining like this WILL NOT WORK */
p.yellow::selection,
p.yellow::-moz-selection {
  background: #fff2a8;
}</pre>

これは、ブラウザがセレクタの一部を理解していないか無効である場合、セレクタ全体を無視するためです。これにはいくつかの例外があります（IE 7？）が、これらのセレクターには関係ありません。

[〜＃〜] demo [〜＃〜]

LINK WHERE INFO IS FROM）

2
user8529958

@ Mike Eng、

テキストの背景色を選択すると、:: selectionを使用してテキストの色を変更できます。:: selectionはchromeで機能し、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
}

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

0
Channaveer Hakari

フォーカス擬似要素スタイル宣言内でボーダーを定義すると、通常の青いボーダーの代わりにそれを使用するようです。これを使用して、要素の境界とまったく同じスタイルを定義できます。

input:focus, textarea:focus {
    border:1px solid gray;
}

#textarea  {
  position:absolute;
  top:10px;
  left:10px;
  right:10px;
  width:calc(100% - 20px);
  height:160px;
  display:inline-block;
  margin-top:-0.2em;
}
<textarea id="textarea">yo</textarea>

変更された境界線スタイルは次のとおりです。

input:focus, textarea:focus {
    border:2px dotted red;
}

#textarea  {
  position:absolute;
  top:10px;
  left:10px;
  right:10px;
  width:calc(100% - 20px);
  height:160px;
  display:inline-block;
  margin-top:-0.2em;
}
<textarea id="textarea">yo</textarea>
0
1.21 gigawatts