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

EDIT: Как отметил в комментариях @geca, это известная ошибка WebKit. Пусть надеется, что он скоро исправится!

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

Здесь jsfiddle демонстрирует эту проблему: http://jsfiddle.net/J5N7K/2/ Выбранный текст на диаграмме оформлен так, как должен. Выбранный текст в текстовом поле и входе отсутствует. (Но это в Firefox.)

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

Ответы

Ответ 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):

enter image description here

Ответ 2

Это известная ошибка WebKit. К сожалению, до сих пор нет решения:)

Обновление: ошибка WebKit была исправлена ​​10/13/2014.

Ответ 3

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

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

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