• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Изменение цвета для текстовых полей сайта (Меняем гамму курсора для текстовых полей с помощью свойства)
Изменение цвета для текстовых полей сайта
Kosten
Дата: Суббота, 2019-07-27, 20:53 | Сообщение 1
Оффлайн
Администраторы
Сообщений:25268
Награды: 58


По факту создаем или меняем цвет курсора, как только он попадает в текстовое поле, где все делается при помощи свойства 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;
}


Теперь можно посмотреть как получилось, где помещен курсор в текстовое поле.

Демонстрация
Прикрепления: 2167135.png(13.3 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Изменение цвета для текстовых полей сайта (Меняем гамму курсора для текстовых полей с помощью свойства)
  • Страница 1 из 1
  • 1
Поиск: