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

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

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

Попробуйте

caret-shape: auto;

caret-shape: bar;

caret-shape: block;

caret-shape: underscore;

<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;
}

Синтаксис

/* Keyword values */
caret-shape: auto;
caret-shape: bar;
caret-shape: block;
caret-shape: underscore;

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

Значения

Это свойство задаётся одним из следующих ключевых слов:

auto

Значение по умолчанию. Форму каретки определяет браузер. Обычно она соответствует принятым на платформе соглашениям и может меняться в зависимости от контекста.

bar

Каретка отображается в виде тонкой вертикальной линии в точке вставки, между символами, а не поверх них.

block

Каретка отображается в виде прямоугольника, перекрывающего следующий за точкой вставки символ. Если следующего символа нет, она отображается после последнего символа.

underscore

Каретка отображается в виде тонкой горизонтальной линии под следующим за точкой вставки символом. Если следующего символа нет, она отображается после последнего символа.

Описание

Текстовая каретка — это мигающий курсор, указывающий, где будет вставлен текст при вводе. Различные формы каретки могут визуально обозначать текущий режим редактирования или использоваться для настройки внешнего вида.

Режимы редактирования и формы каретки

Текстовые редакторы обычно работают в одном из двух режимов:

• Режим вставки: новые символы вставляются в позицию каретки, сдвигая существующий текст к концу строки. Это поведение по умолчанию в большинстве современных приложений.
• Режим замены (также называемый «режимом перезаписи»): новые символы заменяют существующие символы в позиции каретки, а не вставляются между ними. Этот режим часто переключается клавишей Insert.

У различных форм каретки есть традиционные способы применения, например:

• Каретки в виде вертикальной линии располагаются между символами и чаще всего встречаются в современных интерфейсах.
• Каретки в виде блока перекрывают следующий символ и часто используются в терминальных приложениях или указывают на режим замены.
• Каретки в виде подчёркивания располагаются под символами и могут быть полезны для определённых дизайнерских решений, например для имитации пишущей машинки или ввода текста с подчёркиванием.

Позиционирование и поведение каретки

Свойство caret-shape влияет на визуальное отображение каретки, но не меняет её логическое положение в тексте. Независимо от визуальной формы каретка всегда обозначает точку вставки между символами.

Взаимодействие с режимами письма

Форма каретки адаптируется к writing-mode текста. В вертикальных режимах письма каретки в виде вертикальной линии становятся горизонтальными, а каретки в виде подчёркивания располагаются соответствующим образом относительно направления текста.

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

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

caret-shape = 
  auto |
  bar |
  block |
  underscore

Примеры

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

В этом примере показано, как создать интерфейс винтажного терминала с помощью caret-shape: block и анимированного цвета каретки, заменив старый приём с использованием границ.

Ключевая часть решения — использование современных свойств каретки вместо старого приёма с границами. Мы задаём блочную форму каретки, отключаем стандартное мигание и создаём собственную анимацию.

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-shape: block;
  caret-animation: manual;
  animation: old-caret 2s infinite;
}

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

Результат

Интерфейс консоли с кареткой в виде подчёркивания

В этом примере показано, как использовать caret-shape: underscore для создания интерфейса в стиле консоли, в котором каретка в виде подчёркивания дополняет эстетику терминала.

HTML

<label for="console">Enter a command</label>
<div class="console-demo">
  <div class="console-output">
    <p>user@host:css-ui-4 $ ls -a</p>
    <p>. .. Overview.bs Overview.html</p>
  </div>
  <div class="console-input">
    <span class="prompt">user@host:css-ui-4 $ </span>
    <input type="text" id="console" class="console" value="cd" />
  </div>
</div>

CSS

label {
  background: #2a2a2c;
  color: white;
  display: block;
  padding: 10px 20px;
  font-weight: bold;
  font-family: monospace;
}

.console-demo {
  background: black;
  color: white;
  font-family: monospace;
  padding: 10px 20px;
  height: 60px;
}

.console-output {
  margin-bottom: 0.5rem;
}

.console-output p {
  margin: 0 0.25rem;
}

.console-input {
  display: flex;
  align-items: center;
}

.prompt {
  margin-right: 0;
}

.console {
  background: transparent;
  border: none;
  color: white;
  padding-left: 1ch;
  font-family: inherit;
  outline: none;
  flex: 1;
}

.console {
  caret-shape: underscore;
}

Результат

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

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

См. также

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