Кратко
Секция статьи "Кратко"Свойство caret
задаёт цвет текстового курсора в полях ввода, например, <input>
или <textarea>
.
Пример
Секция статьи "Пример"Курсор в поле ввода будет красного цвета:
<label> Красная каретка <input class="red" type="text" placeholder="Красная каретка"></label>
<label> Красная каретка <input class="red" type="text" placeholder="Красная каретка"> </label>
input { display: block; background-color: #ebebeb; font-family: "Roboto", sans-serif; padding: 5px;}.red { caret-color: #cc0000;}
input { display: block; background-color: #ebebeb; font-family: "Roboto", sans-serif; padding: 5px; } .red { caret-color: #cc0000; }
В примере ниже ещё несколько полей ввода с каретками разного цвета:
Как пишется
Секция статьи "Как пишется"Значением для caret
может быть любое поддерживаемое в CSS обозначение цвета. Кроме того доступны ключевые слова:
auto
— значение по умолчанию, пользовательский агент выбирает подходящий цвет для каретки. Обычно этоcurrent
, но пользовательский агент может выбрать другой цвет, чтобы обеспечить хорошую видимость и контраст с окружающим содержимым, принимая во внимание значениеColor current
, фон, тени и другие факторы.Color transparent
— можно использовать везде, где допустимо значение цвета. Это позволяет вам сделать элементы прозрачными, чтобы любой фоновый элемент был виден.current
— соответствует значению свойстваColor color
для текущего элемента. Это позволяет использовать значение цвета для свойств, которые не наследуют его по умолчанию.
Как понять
Секция статьи "Как понять"Простое CSS-свойство, служащее единственной цели — кастомизации цвета для текстового курсора в полях ввода. Текстовый курсор — это видимый маркера, в который будет вставлен следующий введённый символ. Свойство является наследуемым, поэтому его можно указать глобально или для формы, и не указывать каждому полю ввода отдельно.
Ещё пример
Секция статьи "Ещё пример"В данном примере мы создадим форму с несколькими полями ввода, для формы зададим оранжевый цвет каретки, <input>
будет наследовать свойство от формы, для <textarea>
переопределим его на синий, а для параграфа с атрибутом contenteditable
зададим зелёный цвет каретки:
<form> <input type="text"> <textarea cols="30" rows="10"></textarea></form><p contenteditable>Зелёная каретка</p>
<form> <input type="text"> <textarea cols="30" rows="10"></textarea> </form> <p contenteditable>Зелёная каретка</p>
form { caret-color: #ff8630;}form textarea { caret-color: #0d47a1;}form p { caret-color: #00dd00;}
form { caret-color: #ff8630; } form textarea { caret-color: #0d47a1; } form p { caret-color: #00dd00; }
На практике
Секция статьи "На практике"🛠 Добавим немного радуги в инпут:
<input type="text">
<input type="text">
@keyframes rainbow { 0% { caret-color: red; } 20% { caret-color: orange; } 40% { caret-color: yellow; } 60% { caret-color: green; } 80% { caret-color: blue; } 100% { caret-color: purple; }}input { display: block; width: 60vw; height: 50px; font-family: "Roboto", sans-serif; font-size: 50px; caret-color: red; background-color: rgb(255 255 255 / 0.1); color: #eee; border-radius: 1rem; border: 2px dotted rgb(255 255 255 / 0.1);}input:focus { animation: 3s infinite rainbow;}
@keyframes rainbow { 0% { caret-color: red; } 20% { caret-color: orange; } 40% { caret-color: yellow; } 60% { caret-color: green; } 80% { caret-color: blue; } 100% { caret-color: purple; } } input { display: block; width: 60vw; height: 50px; font-family: "Roboto", sans-serif; font-size: 50px; caret-color: red; background-color: rgb(255 255 255 / 0.1); color: #eee; border-radius: 1rem; border: 2px dotted rgb(255 255 255 / 0.1); } input:focus { animation: 3s infinite rainbow; }