Свойство CSS caret-color

Свойство caret-color задаёт цвет курсора вставки (каретки). Это тонкая вертикальная линия, которую легко заметить благодаря её миганию. По умолчанию этот курсор чёрный. Однако свойство caret-color позволяет задать для него любой цвет.

Начальное значение	auto
Применяется к	Элементы, принимающие ввод текста.
Наследуется	Нет.
Анимация	Нет.
Версия	CSS3
Синтаксис DOM	object.style.caretColor = "#1c87c9";

Синтаксис

Синтаксис свойства CSS caret-color

css

caret-color: auto | color;

Пример свойства caret-color:

Пример использования свойства CSS caret-color со значениями transparent и цветом

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .caret-example1 {
        caret-color: transparent;
      }
      .caret-example2 {
        caret-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Caret-color property example</h2>
    <input value="Default caret color" />
    <br />
    <br />
    <input class="caret-example1" value="Transparent caret color" />
    <br />
    <br />
    <input class="caret-example2" value="Custom caret color" />
  </body>
</html>

Try it Yourself »

Значения

Значение	Описание
auto	Устанавливает текущий цвет текста. Это значение по умолчанию.
color	Задаёт цвет каретки.
initial	Заставляет свойство использовать значение по умолчанию.
inherit	Наследует свойство от родительского элемента.

Практика

Какова функция свойства CSS caret-color?

Позволяет программно изменять цвета элементов на вашей HTML-странице.Позволяет изменить цвет каретки в поле ввода.Позволяет изменить цвет фона веб-страницы.Позволяет настроить цвет шрифта вашего текста.Изменяет цвет точки вставки текста, то есть каретки, в элементах ввода и редактируемом содержимом.

Свойство CSS caret-color ​

Синтаксис ​

Пример свойства caret-color: ​

Значения ​

Практика ​

Свойство CSS caret-color

Синтаксис

Пример свойства caret-color:

Значения

Практика