Каретка - CSS-хитрости

Содержание

caretВ CSS есть свойство стенографии , который сочетает в себе caret-colorи caret-shapeсвойства в одной декларации. Итак, мы можем написать это:

.element ( caret: #ff7a18 underscore; )

… Что сродни написанию этого:

.element ( caret-color: #ff7a18; caret-shape: underscore; )

Это удобный ярлык, если вы хотите изменить цвет и форму курсора. А что такое каретка, спросите вы? Вы, вероятно, наиболее знакомы с этим при вводе текста в редактируемый элемент, такой как текстовый ввод или текстовое поле. Я печатаю этот пост в WordPress, который, по сути, представляет собой одно гигантское поле формы, и это курсор, который я вижу, мигает на меня:

Итак, установив caret-color, скажем,, #ff7a18и что- caret-shapeто вроде underscore, мы могли бы ожидать увидеть что-то вроде этого:

Синтаксис

caret: ||

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

Исходный: auto
Применимо к: элементам, принимающим ввод
Унаследовано: да
Проценты: н / д
Вычисленное значение: просмотреть отдельные свойства
Тип анимации: без анимации

Значения

caret: #ff7a18 underscore; caret: yellow block; caret: hsla(50, 100%, 50%, 0.75) bar; /* Keyword color values */ caret: auto; caret: transparent block; caret: currentcolor underscore; /* Global values */ caret: inherit; caret: initial; caret: unset;

Поддержка браузера

На данный момент нет. Свойство изначально определено в спецификации CSS Basic User Interface Module Level 4, которая в настоящее время находится в черновике редактора. Это означает, что еще есть место для изменений, которые необходимо внести до того момента, когда они станут рекомендацией для браузеров.

А пока мы можем «подделать» caretсвойство с помощью другой магии CSS.