logo标签列表

textarea::selection and ::-moz-selection

cssselection
9
有没有一种方法可以将CSS伪元素::selection和::-moz-selection应用于文本区域内的文本？
textarea::selection {
    color: #ff0000;
}

无法工作
2个回答
5
根据这里的说明，它应该能够工作。
你可以尝试给它加上!important吗？
你可以尝试将其应用于不同于textarea的元素，例如div吗？如果它在那里起作用，它对于输入元素的工作方式是不同的-但我找不到任何提到这一点的资源。
它在div和span上对我有效。添加important也没有用。奇怪的是，在多行文本框中，当我选择整个文本框时，空白行将被选中并使用我指定的背景颜色，但带有文字的行会有常规选中颜色。我花了整个上午寻找一些资源，看为什么它在输入中会以不同的方式处理，但我既找不到那个资源，也找不到一个可工作的示例。 - Trevor
这似乎意味着Mozilla在处理作为表单输入的一部分的选择时会有所不同。恐怕这可能是那些无法解决的情况之一，因为浏览器的输入样式指南会取代其他所有内容，类似于select或file这样的表单元素，只能进行非常有限的自定义。 - Pekka
2
在火狐浏览器中可以运行，但在谷歌浏览器中不行。 - El Yobo
1

根据你说的 这里 进行了更新，我也会更新这个问题：

我不同意。它正在运作；）
在Firefox 4.0b6上测试过

我可以确认以下代码至少在Firefox 4.0b6下工作正常（来自我的答案）

<!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() 选择某个内容，但实际上选择的是文本区域对象而不是它的内容。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接