Google chrome CSS3-如何在Chrome中的文本区域和输入中设置所选文本的样式？

编辑：正如@geca在评论中所指出的，这是一个已知的问题。希望它能尽快修好

：：selection

伪元素允许设置所选文本的样式。这与预期一样有效，但不适用于Google Chrome 15中的文本区域和输入。 （我不确定这是webkit还是chrome的问题，因为我不能在Linux上使用Safari。）

下面是一个JSFIDLE演示此问题： pargraph中选定的文本按其应有的样式设置。文本区域和输入中的选定文本无效。（但这是在Firefox上。）

---

是我做错了什么，还是现在无法在Chrome上设置样式？

有没有可能使用jQuery而不是CSS伪元素

看看这个

如果您不了解jQuery，请随时询问。

是带有

内容可编辑的
选项的
？对于大多数事情，函数只列出一个

演示：

HTML:

<textarea>&lt;textarea&gt; Doesn't highlight properly in Chrome.</textarea><br />
<input value="&lt;input&gt; Doesn't highlight properly in Chrome." />
<p>&lt;p&gt; Highlights just fine in Chrome!</p>
<div id="div-textarea" contenteditable>&lt;div contenteditable&gt; Highlights just fine in Chrome!</div>

输出（铬）：

这是一个已知的。抱歉，到目前为止没有解决方案：）

更新：WebKit错误于2014年10月13日修复。
我在Mac OS上的Safari 5.1.2上，并且
文本区域
或
输入
中的选择具有默认样式，不是CSS上声明的那个类。我尝试将伪类直接添加到输入/文本区域，但也没有成功-似乎这是一个错误/功能，因为它也出现在当前的canary构建（v17.xxx）中-在Win7 x64上测试-自2010年5月以来，它是WebKit中的一个版本。@geca感谢您提供的信息，我想这回答了我的问题。既然没有真正的答案，我可以删除我的问题吗？或者你有什么建议？@dotweb没问题。我建议用“编辑：这是一个已知的错误：链接”来编辑你的问题，并对我的第一条评论进行升级投票这与所选文本不同。这就是焦点选择。两件不同的事情。糟糕的是，我研究了一个针对所选文本的jquery解决方案，但实际上找不到。祝你好运找到解决方案。谢谢你的回答，但这不是我想要的。顺便说一句，您甚至可以在不使用JavaScript的情况下使用：focus CSS伪类选择器来实现这一点。这是一个非常聪明的好主意！不过，我可能不会用它。我正在使用输入向服务器发送数据。不值得用div替换输入，只为简单的样式调整AJAX内容。：）（网站/应用程序没有后端时除外）。我想我将不得不等到WebKit团队解决这个问题。我只是想问，你是如何让JSFIDLE链接回HTML框架中向下滚动的问题/@Truth的。在底部。这是一个手动过程，每次我创建一个。我将赏金授予你！：）@ThinkingStiff如果它阻止我在
上使用JavaScript，我可以通过
@Adam将其编辑到我的答案中。这是一个社区Wiki，因此您应该能够在不经过同行审查的情况下对其进行编辑：）
textarea, input, p, div {
    width: 400px;
}

#div-textarea {
    -webkit-appearance: textarea;
    height: 32px;
    overflow: auto;
    resize: both;
}

::selection {
    background-color: black;
    color: white;
}