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

Posted 2023-03-06

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

【英文标题】：Changing the highlight color when selecting text in an HTML text input

【发布时间】：2011-01-16 13:11:48

【问题描述】：

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

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

【问题讨论】：

我建议，如果你使用 text-shadow，你应该非常小心，如这里所述，jqui.net/tips-tricks/highlight-text-and-common-design-failure 和这里welcomebrand.co.uk/thoughts/… :)

【参考方案1】：

如果您正在寻找这个：

这是链接：

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

【讨论】：

这不是我想要的，尽管知道这绝对是一件好事。我需要这样做，但在文本输入框内。我尝试将示例中的代码应用于输入，但没有成功。

@Eric：恐怕不能在文本框中完成，因为我从来没有遇到过这样的事情，可能是其他人有。

虽然这在理论上可以回答问题，it would be preferable 在这里包含答案的基本部分，并提供链接以供参考。

【参考方案2】：

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

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

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

【讨论】：

您可以在元素上使用 HTML5 内容可编辑标签来创建与 ::selection CSS 相同的效果，尽管这不适用于旧版浏览器

@Alex Content editable 对于旧版浏览器非常有效，从 IE 5.5 开始就可以使用。

查看 Saeed em 的答案，全程为您服务

【参考方案3】：

我想这会有所帮助：

选择样式

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

在下面试试。如果你选择了一些看起来像这样的东西，你的 浏览器支持选择样式。

这是带有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

【讨论】：

但是，正如 OP 所要求的那样，这是否可以在文本输入字段（而不是 p 标签）内工作？

【参考方案4】：

我知道这是一个老问题，但对于遇到它的任何人来说，都可以使用contenteditable 来完成，如in this JSFiddle 所示。

向在 cmets 中提到这一点的 Alex 表示敬意（直到现在我才看到！）

【讨论】：

OMG 浏览器太笨了，不支持开箱即用！

【参考方案5】：

@麦克恩，

在选择文本背景颜色时，可以借助 ::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

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

【参考方案6】：

这是代码。

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

【讨论】：

很好，当然这不能回答问题。

【参考方案7】：

这里所有关于::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】：

试试这个代码来使用：

/* For Mozile Firefox Browser */

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

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

【讨论】：

这对 Conspiria 的现有答案没有任何帮助。

【参考方案9】：

问题来了：

 ::选择
      背景：#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？），但与这些选择器无关。

DEMO

LINK WHERE INFO IS FROM

【参考方案10】：

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

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>