caret-color

Свойство caret-color задаёт цвет текстового курсора в полях ввода, например, <input> или <textarea>.

Курсор в поле ввода будет красного цвета:

        
          
          <label>  Красная каретка  <input class="red" type="text" placeholder="Красная каретка"></label>
          <label>
  Красная каретка
  <input class="red" type="text" placeholder="Красная каретка">
</label>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          .red {  caret-color: red;}
          .red {
  caret-color: red;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

В примере ниже ещё несколько полей ввода с каретками разного цвета:

Значением для 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;}textarea {  caret-color: #2E9AFF;}p {  caret-color: #F498AD;}
          form {
  caret-color: #FF8630;
}

textarea {
  caret-color: #2E9AFF;
}

p {
  caret-color: #F498AD;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          <input type="text">
          <input type="text">

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          @keyframes rainbow {  0% { caret-color: #F498AD; }  20% { caret-color: #FF8630; }  40% { caret-color: #FFD829; }  60% { caret-color: #41E847; }  80% { caret-color: #2E9AFF; }  100% { caret-color: #F498AD; }}input:focus {  animation: 3s infinite rainbow;}
          @keyframes rainbow {
  0% { caret-color: #F498AD; }
  20% { caret-color: #FF8630; }
  40% { caret-color: #FFD829; }
  60% { caret-color: #41E847; }
  80% { caret-color: #2E9AFF; }
  100% { caret-color: #F498AD; }
}

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

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать