Давайте рассмотрим один интересное свойство, которое отвечает про изменение цвета курсора для текстовых полей с помощью свойства CSS caret-color. Свойство CSS caret-color меняет цвет каретки или мигающий курсор для полей ввода текста. Изменение цвета курсора, когда пользователь фокусируется на текстовом поле, делает его более заметным.
Поля ввода включают в себя input type = "text", textarea, а также любой элемент, имеющий атрибут contenteditable, где этот атрибут заставляет любой элемент вести себя как textarea.
Вы можете установить любое значение цвета CSS на цвете caret-color:
Код
#element {
/* color keywords */
caret-color: green;
/* hex */
caret-color: #423e3e;
}
HTML
Код
<input type="text" id="demo-text" />
CSS
Код
#element {
caret-color: #e0831a;
}
Поместите курсор в текстовое поле ниже и увидите оранжевый цвет каретки.
Демонстрация
