我一直在整个网络上寻找这个，甚至找不到其他人甚至问这个问题，更不用说解决方案了......
有没有办法在选择文本时更改文本输入中突出显示区域的颜色？不是高亮边框或背景，而是当您实际选择文本时出现在文本周围的部分。
【问题讨论】：
标签： html css text input highlight
【讨论】：
感谢您提供的链接，但似乎没有显示实际的文本突出显示。
就手头的实际问题而言，我最终选择了一种不同的方法，完全消除了对文本输入的需求，并使用带有一些 JavaScript 的 innerHTML。它不仅绕过了文本突出显示，而且实际上看起来更干净。
对 HTML 表单控件的这种细微调整只是完全消除表单控件的另一个很好的论据。哈哈！
【讨论】：
我想这会有所帮助：
选择样式
可以为用户定义文本的颜色和背景 选择。
在下面试试。如果你选择了一些看起来像这样的东西，你的 浏览器支持选择样式。
这是带有
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
【讨论】：
我知道这是一个老问题，但对于遇到它的任何人来说，都可以使用contenteditable 来完成，如in this JSFiddle 所示。
向在 cmets 中提到这一点的 Alex 表示敬意（直到现在我才看到！）
【讨论】：
@麦克恩，
在选择文本背景颜色时，可以借助 ::selection 更改文本颜色，注意 ::selection 在 chrome 中工作，以使在基于 firefox 的浏览器中工作试试这个 ::-moz-selection
在 reset.css 或您要应用效果的 css 页面中尝试以下代码 sn-p。
::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
}
上面的代码即使在输入框中也可以工作。
【讨论】：
这是代码。
/*** 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;
}
【讨论】：
这里所有关于::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>【讨论】：
试试这个代码来使用：
/* For Mozile Firefox Browser */
::-moz-selection { background-color: #4CAF50; }
/* For Other Browser*/
::selection { background-color: #4CAF50; }
【讨论】：
问题来了：
::选择{
背景：#ffb7b7； /* WebKit/Blink 浏览器 /
}
::-moz-选择{
背景：#ffb7b7； / Gecko 浏览器 */
}
在选择选择器中，颜色和背景是唯一有效的属性。您可以为一些额外的天赋做些什么，就是更改页面不同段落或不同部分的选择颜色。
我所做的只是对不同类别的段落使用不同的选择颜色：
p.red::selection {
背景：#ffb7b7；
}
p.red::-moz-选择 {
背景：#ffb7b7；
}
p.blue::选择{
背景：#a8d1ff；
}
p.blue::-moz-选择 {
背景：#a8d1ff；
}
p.yellow::selection {
背景：#fff2a8；
}
p.yellow::-moz-selection {
背景：#fff2a8；
}
请注意选择器是如何不组合的，即使 > 样式块正在做同样的事情。如果将它们结合起来，它将不起作用：
<pre>/* Combining like this WILL NOT WORK */
p.yellow::selection,
p.yellow::-moz-selection {
background: #fff2a8;
}</pre>
这是因为浏览器会忽略整个选择器，如果其中有一部分他们不理解或无效。这有一些例外（IE 7？），但与这些选择器无关。
【讨论】：
似乎当您在焦点伪元素样式声明中定义边框时，它使用它而不是正常的蓝色边框。使用它，您可以定义与元素边框完全相同的样式。
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>【讨论】：