CSS-свойство `caret-animation`

Свойство caret-animation CSS используется для включения или отключения мигания курсора ввода — видимого маркера, который отображается в редактируемых элементах и указывает, где будет вставлен или удалён следующий символ.

Свойство caret-animation также можно задать в качестве части сокращённого свойства caret.

Синтаксис

/* Keyword values */
caret-animation: auto;
caret-animation: manual;

/* Global values */
caret-animation: inherit;
caret-animation: initial;
caret-animation: revert;
caret-animation: revert-layer;
caret-animation: unset;

Значения

Для этого свойства указывается одно из следующих ключевых слов:

auto

Курсор мигает. Это значение по умолчанию (начальное значение).

manual

Курсор не мигает.

Формальное определение

Формальный синтаксис

caret-animation = 
  auto |
  manual

Примеры

Основное использование caret-animation

В этом примере показана разница между значениями auto и manual свойства caret-animation для редактируемого элемента.

HTML

Разметка содержит два элемента <p> с атрибутом contenteditable, позволяющим редактировать их содержимое.

<p contenteditable="true">
  My caret animates because <code>caret-animation</code> is set to
  <code>auto</code>.
</p>
<p contenteditable="true">
  My caret doesn't animate because <code>caret-animation</code> is set to
  <code>manual</code>.
</p>

CSS

В CSS задаётся значение red для свойства caret-color. Затем для первого абзаца задаётся значение auto свойства caret-animation, а для второго — значение manual свойства caret-animation.

p {
  caret-color: red;
}

p:first-of-type {
  caret-animation: auto;
}

p:last-of-type {
  caret-animation: manual;
}

Результат

Результат отображается так:

Попробуйте установить фокус на оба абзаца, чтобы увидеть разницу в поведении курсора.

Создание пользовательской анимации курсора

В этом примере пользовательская анимация курсора применяется к редактируемому абзацу и текстовому полю ввода.

HTML

Разметка содержит элемент <p> и два текстовых элемента <input>. Для элемента <p> задан атрибут contenteditable, позволяющий редактировать его содержимое. Для абзаца и первого текстового поля задано значение custom-caret свойства class.

<p contenteditable="true" class="custom-caret">
  This paragraph has a custom animation applied to it, plus
  <code>caret-animation: manual</code> to stop the default caret blinking and
  allow the smooth animation to be seen.
</p>

<input
  type="text"
  class="custom-caret"
  value="I've got a custom caret animation" />

<input type="text" value="I've got the default blinking caret" />

CSS

Сначала мы определяем набор правил @keyframes, которые меняют значение свойства caret-color с transparent на darkblue.

@keyframes custom-caret-animation {
  from {
    caret-color: transparent;
  }

  to {
    caret-color: darkblue;
  }
}

Затем мы стилизуем <p> и первый <input>, задавая пользовательскую анимацию @keyframes, значение caret-color и значение manual свойства caret-animation, чтобы отключить стандартное мигание курсора.

body {
  display: flex;
  flex-direction: column;
}

input {
  margin-bottom: 20px;
}

.custom-caret {
  animation: custom-caret-animation infinite linear alternate 0.75s;
  caret-color: darkblue;
  caret-animation: manual;
}

p,
input {
  font-size: 1.6rem;
}

Результат

Результат отображается так:

Попробуйте установить фокус на первые два элемента, чтобы увидеть пользовательскую анимацию курсора. Чтобы сравнить её со стандартным мигающим курсором, установите фокус на третий элемент.

Спецификации

Совместимость с браузерами

См. также

• caret-color, caret-shape
• caret — сокращённое свойство
• модуль базового пользовательского интерфейса CSS