Как скрыть текстовую область, но держать каретку видимой?

Question

Интересно, смогу ли я сохранить каретку видимой, уменьшив непрозрачность текстовой области до нуля. На самом деле, я хочу сделать текстовые строки невидимыми при наличии видимой каретки, которая будет именно там, где был бы текст.

Answer 1

Да, это возможно с помощью свойства color в текстовой области. Установка transparent сделает текст прозрачным. Кроме того, если вы не хотите выделять текст, установите для свойства user-select значение none.

Answer 2

Спецификация CSS3 UI.определяет caret-color свойство , которое позволяет стилизовать каретку независимо от текста.

К сожалению, насколько мне известно, это свойство еще не реализовано в браузере.Для Gecko (Firefox) существует как минимум отчет об ошибке .

Answer 3

Вы можете использовать псевдоэлемент, подобный этому:

p.article::first-letter {
  color: #ff0000;
}

для HTML, подобного этому:

<p class="article">A paragraph in an article</p>

Проверьте эту ссылку: http://www.w3schools.com/CSS/CSS_pseudo_elements.asp