textarea::selection 和 ::-moz-selection答案

【问题标题】：textarea::selection and ::-moz-selectiontextarea::selection 和 ::-moz-selection
【发布时间】：2012-04-19 03:20:56
【问题描述】：

有没有办法将::selection 和::-moz-selection CSS 伪元素应用于文本区域内的文本？

textarea::selection {
    color: #ff0000;
}

不工作

【问题讨论】：

标签： css selection

【解决方案1】：

根据this，它应该可以工作。

你能试试给它一个!important吗？

您可以尝试将其应用于与文本区域不同的元素，例如div?如果它在那里工作，那么它对输入元素的工作方式会有所不同 - 但我找不到任何提到这一点的资源。

【讨论】：

它在 div 和 spans 上对我有用。添加一个重要的没有帮助。奇怪的是，在多行文本区域上，当我选择整个文本区域时，将使用我指定的背景颜色选择空白行，但其中有文字的那些具有常规选择颜色。我整个上午都在寻找一些资源，提到为什么在输入中会以不同的方式处理它，但我找不到那个或一个有效的例子。
这听起来像是 Mozilla 正在处理不同的选择，这些选择是表单输入的一部分。恐怕这可能是无能为力的情况之一，因为浏览器的输入样式准则会凌驾于其他一切之上，类似于 select 或 file 等表单输入元素，只能以非常有限的方式进行自定义.
在 FF 中适用于我，但在 Chrome 中无效。

【解决方案2】：

如你所说更新here，我也会更新这个问题：

我不同意。它正在工作;)
在 Firefox 4.0b6 上测试

我可以确认以下代码在Firefox 4.0b6 下至少工作（取自我自己的answer）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test</title>
<style type="text/css">

p::-moz-selection, input::-moz-selection, textarea::-moz-selection {
    color: red;
    background-color: grey;
}
</style>
</head>

<body>
<p>This paragraph is selection-aware.</p>
<form action="#">
<input type="text" id="itext" value="So is this input[text]" />
<textarea id="itextarea">And this textarea, as well</textarea>
</form>
</body>
</html>

如果您对正在做的事情不小心，它可能不会以编程方式工作。也许您正在尝试使用 jQuery.select() 选择某些内容，并且您选择的是 textarea 对象而不是其内容。

【讨论】：