`caret-color`

С помощью сaret-color можно менять цвет курсора в режиме набора текста.

Время чтения: меньше 5 мин

Кратко

Свойство caret-color задаёт цвет текстового курсора в полях ввода, например, <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-color может быть любое поддерживаемое в CSS обозначение цвета. Кроме того доступны ключевые слова:

auto — значение по умолчанию, пользовательский агент выбирает подходящий цвет для каретки. Обычно это currentColor, но пользовательский агент может выбрать другой цвет, чтобы обеспечить хорошую видимость и контраст с окружающим содержимым, принимая во внимание значение currentColor, фон, тени и другие факторы.
transparent — можно использовать везде, где допустимо значение цвета. Это позволяет вам сделать элементы прозрачными, чтобы любой фоновый элемент был виден.
currentColor — соответствует значению свойства 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>:

        
          
          <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: rgb(255 255 255 / .1);  color: #eee;  border-radius: 1rem;  border: 2px dotted rgb(255 255 255 / .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: rgb(255 255 255 / .1);
  color: #eee;
  border-radius: 1rem;
  border: 2px dotted rgb(255 255 255 / .1);
}

input:focus {
  animation: 3s infinite rainbow;
}

Открыть демо в новой вкладке