В caret-shapeимота в CSS променя формата на курсора на текст в редактируеми елементи, които показва на потребителя пише. Той е част от модула CSS Basic User Interfaces Level 4, който в момента е в състояние Работен проект.
Докато пиша, каретата е малката мигаща лента, която следва всеки символ, който въвеждам.
Можем да използваме, за caret-shapeда променим тази лента на нещо друго като, да речем, блок:
.element ( caret-shape: block; )Това ще доведе до карета, която е по-скоро подобна на това, което може да видите, когато пишете в командния ред:
Синтаксис
caret-shape: auto | bar | block | underscore- Начална стойност:
auto - Прилага се за: елементи, които приемат вход
- Наследен: да
- Проценти: n / a
- Изчислена стойност: посочена ключова дума
- Тип анимация: по изчислена стойност
Стойности
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 | Ръб, край | Firefox | Chrome | Сафари | Опера |
|---|---|---|---|---|---|
| Не | Не | Не | Не | Не | всичко |
| Android Chrome | Android Firefox | Браузър за Android | iOS Safari | Opera Mobile |
|---|---|---|---|---|
| Не | Не | Не | Не | Не |
Можем да „фалшифицираме“ това
Докато поддръжката на браузъра е такава, всъщност можем да репликираме ефекта с друга CSS магия.
Това е нещо, което се използва за тази анимация на пишеща машина:
Повече информация
- CSS Basic User Interface Module Level 4 (Работен проект)
Свързани свойства
Алманах на 27 януари 2021 г.каретка
.element ( caret: #ff7a18 underscore; ) 
Крис Койер