在 HTML 文本输入中选择文本时更改突出显示颜色

Changing the highlight color when selecting text in an HTML text input

提问by Eric

I've been looking for this throughout the web and can't even find anyone else even asking this, let alone a solution...

我一直在整个网络上寻找这个，甚至找不到其他人甚至问这个，更不用说解决方案了......

Is there a way to change the color of the highlight area within a text input when text is selected? Not the highlight border or the background, but the portion that appears around the text when you have the text actually selected.

有没有办法在选择文本时更改文本输入中突出显示区域的颜色？不是高亮边框或背景，而是当您实际选择文本时出现在文本周围的部分。

采纳答案by Eric

Thanks for the links, but it does seem as if the actual text highlighting just isn't exposed.

感谢您提供链接，但似乎没有暴露实际的文本突出显示。

As far as the actual issue at hand, I ended up opting for a different approach by eliminating the need for a text input altogether and using innerHTML with some JavaScript. Not only does it get around the text highlighting, it actually looks much cleaner.

至于手头的实际问题，我最终选择了一种不同的方法，完全消除了对文本输入的需求，并使用了一些 JavaScript 的 innerHTML。它不仅绕过了文本突出显示，而且实际上看起来更干净。

This granular of a tweak to an HTML form control is just another good argument for eliminating form controls altogether. Haha!

对 HTML 表单控件的这种细化调整是完全消除表单控件的另一个很好的论据。哈哈！

回答by Sarfraz

If you are looking for this:

如果你正在寻找这个：

Here is the link:

链接在这里：

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

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

回答by Sarfraz

this is the code.

这是代码。

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

回答by jaypeagi

I realise this is an old question but for anyone who does come across it this can be done using contenteditableas shown in this JSFiddle.

我意识到这是一个老问题，但对于任何遇到它的人来说，都可以使用此 JSFiddle 中contenteditable所示的方法来完成。

Kudos to Alex who mentioned this in the comments (I didn't see that until now!)

感谢 Alex 在评论中提到这一点（我直到现在才看到！）

回答by pilau

All answers here are correct when it comes to the ::selectionpseudo element, and how it works. However, the question does in fact specifically ask how to use it on text inputs.

当涉及到::selection伪元素及其工作原理时，这里的所有答案都是正确的。但是，该问题实际上确实专门询问如何在文本输入上使用它。

The only way to do that is to apply the rule via a parent of the input (any parent for that matter):

唯一的方法是通过输入的父级（任何父级）应用规则：

.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>

回答by pilau

Here is the rub:

这是摩擦：

    ::selection {
      background: #ffb7b7; /* WebKit/Blink Browsers /
    }
    ::-moz-selection {
      background: #ffb7b7; / Gecko Browsers */
    }

在选择选择器中，颜色和背景是唯一有效的属性。您可以做一些额外的事情，就是更改页面不同段落或不同部分的选择颜色。

All I did was use different selection color for paragraphs with different classes:

我所做的只是为不同类别的段落使用不同的选择颜色：

    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>

That's because browsers ignore the entire selector if there is a part of it they don't understand or is invalid. There is some exceptions to this (IE 7?) but not in relation to these selectors.

这是因为如果浏览器不理解或无效的一部分，浏览器会忽略整个选择器。对此有一些例外（IE 7？），但与这些选择器无关。

DEMO

演示

LINK WHERE INFO IS FROM

信息来源链接

回答by Channaveer Hakari

@ Mike Eng,

@麦克英，

On selecting the text background color, text color can be changed with the help of ::selection, note that ::selectionworks in in chrome, to make that work in firefox based browsers try this one ::-moz-selection

在选择文本背景颜色时，可以在::selection的帮助下更改文本颜色，请注意::selection在 Chrome 中工作，要使其在基于 Firefox 的浏览器中工作，请尝试这个::-moz-selection

Try the following snippet of code in reset.css or the css page where exactly you want to apply the effect.

在 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
}

The above code will work even in the input boxes too.

上面的代码即使在输入框中也能工作。

回答by 1.21 gigawatts

It seems like when you define the border inside of a focus pseudo element style declaration it uses that instead of the normal blue border. Using that you can define a style that is exactly the same as the element border.

似乎当您在焦点伪元素样式声明中定义边框时，它使用它而不是普通的蓝色边框。使用它，您可以定义与元素边框完全相同的样式。

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>

Here is a modified border style:

这是修改后的边框样式：

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>

回答by dipak chorvada

Try this code to use:

尝试使用此代码：

/* For Mozile Firefox Browser */

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

/* For Other Browser*/
::selection { background-color: #4CAF50; }

回答by Lee

I guess this can help :

我想这可以帮助：

selection styles

It's possible to define color and background for text the user selects.

Try it below. If you select something and it looks like this, your browser supports selection styles.

This is the paragraph with normal ::selection.

This is the paragraph with ::-moz-selection.

This is the paragraph with ::-webkit-selection.

Testsheet:

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

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

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

选择风格

可以为用户选择的文本定义颜色和背景。

下面试试看。如果您选择某些内容并且看起来像这样，则您的浏览器支持选择样式。

这是带有 的段落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;
}

Quoted from Quirksmode

引自Quirksmode