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

Question

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

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

Answer 1

如果您正在寻找:

链接在这里:

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

Answer 2

这是代码.

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

Answer 3

我意识到这是一个古老的问题但是对于任何碰到它的人来说,这可以使用如此JSFiddle中contenteditable所示的方式完成.

感谢Alex在评论中提到这一点(直到现在我才看到它!)

Answer 4

这里的所有答案都适用于::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>

Answer 5

感谢您的链接，但似乎实际突出显示的文本并未公开。

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

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