По факту создаем или меняем цвет курсора, как только он попадает в текстовое поле, где все делается при помощи свойства CSS caret-color. Свойство CSS caret-color меняет цвет каретки или мигающий курсор для полей ввода текста. Изменение цвета курсора, когда пользователь фокусируется на текстовом поле, делает его более заметным.
Поля ввода включают в себя:
Код
<input type="text" />, <textarea>
Где любой элемент, имеющий атрибут contenteditable - этот атрибут заставляет любой элемент вести себя как textarea.
Вы можете установить любое значение цвета CSS на цвете caret-color.
Код
#element {
/* цветные ключевые слова */
caret-color: #0a860a;
/* hex */
caret-color: #524f4f;
}
Поместите курсор в текстовое поле ниже и увидите оранжевый цвет caret color.
HTML
Код
<input type="text" id="demo-text" />
CSS
Код
#element {
caret-color: #ea891c;
}
Под демонстрацию сделали так:
HTML
Код
<div id="demo">
<input type="text" id="cdsant-ersad">
</div>
CSS
Код
#cdsant-ersad {
display: block;
font-size: inherit;
font-family: inherit;
font-weight: 700;
padding: 10px;
width: 100%;
caret-color: #e0851f;
border: 1px solid #c3bcbc;
box-sizing: border-box;
margin: 0 0 40px 0;
}
Теперь можно посмотреть как получилось, где помещен курсор в текстовое поле.
Демонстрация
