CSS3 - 如何在Chrome中的文本区域和输入中选择文本样式？ [英] CSS3 - How to style the selected text in textareas and inputs in Chrome?

问题描述

编辑：正如@geca在评论中指出的，这是一个已知的 WebKit错误。让我们希望它很快固定！

As @geca noted in the comments, this is a known WebKit bug. Let's hope it gets fixed soon!

:: selection 伪元素允许对所选文本设置样式。这个工作原理正常，但不是textareas和输入在谷歌Chrome浏览器15.
（我不知道是否是一个webkit或chrome问题，因为我不能使用Linux上的Safari。）

The ::selection pseudo-element allows one to style the selected text. This works as expected but not for textareas and inputs in Google Chrome 15. (I'm not sure if it's a webkit or chrome issue since I can't use Safari on Linux.)

这里有一个jsfiddle演示这个问题： http://jsfiddle.net/J5N7K/2/
在pargraph中选择的文本被设置为应该的样式。在textarea和input中选择的文本不是。

Here's a jsfiddle demonstrating this issue: http://jsfiddle.net/J5N7K/2/ The selected text at the pargraph is styled as it should be. The selected text in the textarea and input isn't. (But it is at Firefox.)

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

Am I doing something wrong or is it just not possible to style it at Chrome right now?

推荐答案

是< div> with contenteditable 一个选项？

Is a <div> with contenteditable an option? Functions just list a <textarea> for most things.

演示： http://jsfiddle.net/ThinkingStiff/FcCgA/

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>

CSS：

textarea, input, p, div {
    width: 400px;
}

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

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

输出（Chrome）：

Output (Chrome):

这篇关于CSS3 - 如何在Chrome中的文本区域和输入中选择文本样式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！