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

17

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

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

Вот пример jsfiddle, демонстрирующий эту проблему: Ссылка Выбранный текст на диаграмме оформлен так, как должен. Выбранный текст в текстовом поле и входе отсутствует. (Но это в Firefox.)

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

    
задан js-coder 08.12.2011 в 23:10
источник
  • Я нахожусь в Safari 5.1.2 на Mac OS, и выбор внутри текстового поля или ввода имеет стиль по умолчанию, а не тот, который объявлен в CSS. –  Alessandro Vendruscolo 09.12.2011 в 15:13
  • Я попытался добавить псевдоклассы непосредственно к вводу / textarea без успеха - кажется, что это ошибка / функция, так же как и в текущей канареечной сборке (v17.xxx) - проверена на Win7 x64 –  Jörn Berkefeld 10.12.2011 в 13:32
  • Об этом сообщается в WebKit с мая 2010 года. –  geca 12.12.2011 в 15:36
  • @geca Спасибо за информацию, я думаю, это отвечает на мой вопрос. Должен ли я просто удалить свой вопрос, так как нет реального ответа или что вы предлагаете? –  js-coder 12.12.2011 в 16:49
  • @dotweb Нет проблем. Я предлагаю отредактировать ваш вопрос с помощью «EDIT: это ошибка« ссылка: ссылка »и выдержка моего первого комментария. ;) –  geca 13.12.2011 в 08:29
Показать остальные комментарии

3 ответа

8

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

Демо: Ссылка

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):

    
ответ дан ThinkingStiff 16.12.2011 в 04:08
  • Это довольно умная, хорошая идея! Я, вероятно, не буду использовать его. Я использую входы для отправки данных на сервер. Не стоит заменять входы на div и настраивать материал AJAX только для простых стилей. :) (За исключением случаев, когда сайт / приложение не имеет бэкэнд). Думаю, мне придется подождать, пока команда WebKit не устранит эту проблему. –  js-coder 16.12.2011 в 16:05
  • Я просто хочу спросить, как вы сделали jsfiddle для ссылки на вопрос / –  Madara Uchiha♦ 17.12.2011 в 20:10
  • @Truth Прокрутка вниз в рамке HTML. Это внизу. Это ручной процесс, который я делаю каждый раз, когда я его создаю. –  ThinkingStiff 17.12.2011 в 20:12
  • Я наградил вас щедростью! :) –  js-coder 18.12.2011 в 21:52
  • @dotweb Спасибо. :) –  ThinkingStiff 18.12.2011 в 22:12
5

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

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

    
ответ дан Second Rikudo 05.12.2014 в 01:20
  • Geca уже отметил, что в комментариях несколько дней назад! –  js-coder 18.12.2011 в 10:59
  • @Adam Не стесняйтесь редактировать это в свой ответ. Это Wiki сообщества, поэтому вы можете редактировать его, не будучи рецензированным экспертом :) –  Madara Uchiha♦ 02.12.2014 в 08:48
0

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

взгляните на эту ссылку .

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

    
ответ дан Nick Fury 12.12.2011 в 15:56
  • Это не то же самое, что выбранный текст. Это выбор фокуса. Две разные вещи. –  BoltClock♦ 12.12.2011 в 16:09
  • Плохо я посмотрел в jquery-решение на выделенный текст и не смог найти его. Удачи вам в поиске решения. –  Nick Fury 12.12.2011 в 16:30
  • Спасибо, за ответ, но это не то, что я ищу. Кстати, вы даже можете добиться этого без JavaScript, используя селектор псевдосектора CSS: focus CSS. –  js-coder 12.12.2011 в 16:48