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

caret — это CSS-сокращённое свойство, которое позволяет одной декларацией задать внешний вид и поведение курсора вставки.

Попробуйте

caret: red;

caret: block manual;

caret: underscore auto green;

caret: bar manual orange;

<section class="default-example container" id="default-example">
  <div>
    <label for="example-element">Edit text field:</label>
    <input id="example-element" type="text" value="Sample text" />
  </div>
</section>

div {
  text-align: left;
}

#example-element {
  font-size: 1.2rem;
  padding: 8px;
  width: 300px;
}

Составные свойства

Это свойство является сокращённой записью для следующих свойств CSS:

• caret-color
• caret-animation
• caret-shape

Синтаксис

/* Individual values */
caret: red; /* caret-color only */
caret: block; /* caret-shape only */
caret: manual; /* caret-animation only */

/* Two values */
caret: red manual; /* caret-color + caret-animation */
caret: block auto; /* caret-shape + caret-animation */
caret: underscore orange; /* caret-shape + caret-color */

/* Three values */
caret: bar manual red; /* caret-shape + caret-animation + caret-color */
caret: block auto #00ff00; /* caret-shape + caret-animation + caret-color */

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

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

Значения

caret-color

Задаёт цвет курсора.

caret-animation

Определяет, мигает ли курсор.

caret-shape

Задаёт форму курсора.

Описание

Сокращённое свойство caret позволяет задать несколько свойств курсора одной декларацией, что упрощает настройку его внешнего вида и поведения.

Разрешение значений

Если в сокращённой записи некоторые значения пропущены, они сбрасываются к исходным:

• caret-color: auto (разрешается в currentColor).
• caret-animation: auto (курсор мигает).
• caret-shape: auto (форма определяется браузером).

Независимость от порядка

В отличие от некоторых сокращённых свойств CSS, свойство caret принимает значения в любом порядке. Браузер определяет, к какому свойству относится каждое значение, на основе его типа:

• значения color применяются к caret-color.
• Ключевые слова auto/manual применяются к caret-animation.
• Ключевые слова формы (bar, block, underscore) применяются к caret-shape.

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

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

caret = 
  <'caret-color'> ||
  <'caret-animation'> ||
  <'caret-shape'>

Примеры

Ретро-терминал с анимированным курсором

В этом примере создаётся интерфейс винтажного терминала с помощью сокращённого свойства caret, объединяющего несколько свойств курсора. Так показано, как оно заменяет устаревшие методы на основе границ.

Основное преимущество сокращённого свойства caret — возможность объединить несколько свойств в одной декларации. Здесь мы задаём форму block, отключаем мигание по умолчанию и задаём цвет green — всё в одной строке.

HTML

<label for="terminal">Enter a command</label>
<div class="old-screen">
  <span>></span>
  <textarea id="terminal" class="terminal-input"></textarea>
</div>

CSS

label {
  background: #092104;
  display: block;
  padding: 10px 20px;
  color: #00ad00;
  font-weight: bold;
  font-family: monospace;
}

.old-screen {
  background: repeating-linear-gradient(
    #092104,
    #092104 2px,
    #123208 2px,
    #123208 4px
  );
  height: 140px;
  display: flex;
  align-items: flex-start;
  padding: 20px;
  font-family: monospace;
}

span {
  display: inline-block;
  padding: 2px 5px;
  color: #00ad00;
  font-weight: bold;
  margin-right: 8px;
}

.terminal-input {
  background: transparent;
  height: 100%;
  border: none;
  color: #00ad00;
  font-family: inherit;
  font-size: 1rem;
  outline: none;
  flex: 1;
  resize: none;
}

.terminal-input {
  caret: block manual green;
  animation: vintage-caret 2s infinite;
}

@keyframes vintage-caret {
  0%,
  50% {
    caret-color: #00ad00;
  }
  75%,
  100% {
    caret-color: transparent;
  }
}

Результат

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

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

См. также

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