caret-shapeСвойство в CSS изменяет форму текстового курсора внутри редактируемых элементов , который указывает пользователь печатает. Это часть модуля CSS Basic User Interfaces Module Level 4, который в настоящее время находится в статусе рабочего проекта.
Пока я пишу, курсор - это маленькая мигающая полоса, которая следует за каждым набираемым мной символом.
Мы можем использовать, caret-shapeчтобы изменить эту полосу на что-то другое, например, на блок:
.element ( caret-shape: block; )В результате появится курсор, который больше похож на то, что вы можете увидеть при вводе в командной строке:
Синтаксис
caret-shape: auto | bar | block | underscore- Первоначальный значение:
auto - Применимо к: элементам, принимающим ввод
- Унаследовано: да
- Проценты: н / д
- Вычисленное значение: указанное ключевое слово
- Тип анимации: по вычисленному значению
Значения
caret-shape: auto; caret-shape: bar; caret-shape: block; caret-shape: underscore;На данный момент у нас не так много поддержки браузеров caret-shape(см. Ниже), но вот отображение этих значений.
caret-shape: bar;
caret-shape: block;
caret-shape: underscore;
Поддержка браузера
Не похоже, что в Caniuse есть какие-либо данные, но после небольшого быстрого тестирования я обнаружил вот что:
| IE | Край | Fire Fox | Хром | Сафари | Опера |
|---|---|---|---|---|---|
| Нет | Нет | Нет | Нет | Нет | Все |
| Android Chrome | Android Firefox | Браузер Android | iOS Safari | Opera Mobile |
|---|---|---|---|---|
| Нет | Нет | Нет | Нет | Нет |
Мы можем «подделать» это
Хотя браузерная поддержка - это то, что есть, мы можем воспроизвести эффект с помощью другой магии CSS.
Вот такие вещи используются в анимации пишущей машинки:
Дополнительная информация
- Модуль базового пользовательского интерфейса CSS, уровень 4 (рабочий проект)
Связанные свойства
Альманах на 27 января 2021 г.каретка
.element ( caret: #ff7a18 underscore; ) 
Крис Койер