我一直在整个网络上寻找这个，甚至找不到其他人甚至问这个，更不用说解决方案了......
有没有办法在选择文本时更改文本输入中突出显示区域的颜色？不是高亮边框或背景，而是当您实际选择文本时出现在文本周围的部分。
问问题
130461 次
10 回答
50
于 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 回答
2
这是摩擦：
::选择{
背景：#ffb7b7；/* WebKit/闪烁浏览器/
}
::-moz-选择{
背景：#ffb7b7；/壁虎浏览器*/
}
在选择选择器中，颜色和背景是唯一有效的属性。您可以为一些额外的天赋做些什么，就是更改页面不同段落或不同部分的选择颜色。
我所做的只是对具有不同类别的段落使用不同的选择颜色：
p.red::选择{
背景：#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？），但与这些选择器无关。
演示
链接信息来自哪里
于 2017-09-07T18:49:27.657 回答
1
@迈克英，
在选择文本背景颜色时，可以在 ::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
}
上面的代码即使在输入框中也可以工作。
于 2014-03-05T06:04:28.947 回答
0
感谢您的链接，但似乎实际的文本突出显示没有公开。
至于手头的实际问题，我最终选择了一种不同的方法，完全消除了对文本输入的需求，并使用带有一些 JavaScript 的 innerHTML。它不仅绕过了文本突出显示，而且实际上看起来更干净。
对 HTML 表单控件的这种细微调整只是完全消除表单控件的另一个很好的论据。哈哈！
于 2010-02-15T16:59:10.257 回答
0
似乎当您在焦点伪元素样式声明中定义边框时，它使用它而不是普通的蓝色边框。使用它，您可以定义与元素边框完全相同的样式。
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>于 2018-05-11T20:22:39.063 回答
-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; }
于 2011-09-01T13:46:57.567 回答