CSS3 - Как стилизовать выделенный текст в текстовых областях и вводить в Chrome?

Question

РЕДАКТИРОВАТЬ: Как @geca отметил в комментариях, это известная ошибка WebKit .Будем надеяться, что это скоро исправят!

Псевдоэлемент ::selection позволяет стилизовать выделенный текст.Это работает, как и ожидалось, но не для текстовых областей и входных данных в Google Chrome 15. (Я не уверен, что это проблема с webkit или chrome, поскольку я не могу использовать Safari в Linux.)Проблема: http://jsfiddle.net/J5N7K/2/ Выбранный текст на параграфе оформлен так, как и должно быть.Выделенный текст в текстовой области и ввод не.(Но это в Firefox.)

Я что-то не так делаю или просто не возможно стилизовать его в Chrome прямо сейчас?

Answer 1

<div> с contenteditable опция? Функции просто перечисляют <textarea> для большинства вещей.

Демо: 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):

Answer 2

Это известная ошибка WebKit .Извините, решения пока нет:)

Обновление: ошибка WebKit была исправлена ​​13.10.2014.

Answer 3

Есть ли вероятность, что вместо использования псевдоэлемента CSS вы можете использовать jQuery.

взгляните на это http://jsfiddle.net/J5N7K/6/.

если вы не понимаете jQuery, не стесняйтесь спрашивать об этом.