Как изменить цвет курсора ввода?

Question

Я хочу изменить цвет курсора, когда кто-то нажимает кнопку ввода формы, такую ​​как: имя, имя пользователя, пароль и т. Д.

Answer 1

«Карет» - это слово, которое вы ищете. Я действительно верю, что это часть дизайна браузеров, а не в пределах css.

Однако, вот интересная запись о симуляции изменения карат с использованием Javascript и CSS http://www.dynamicdrive.com/forums/showthread.php?t=17450 Кажется, это немного взломанно, но, вероятно, единственный способ выполнить задачу. Суть статьи:

Мы будем иметь простую текстовую где-то на экране вне поля зрения зрителя, и когда пользователь нажимает на наш «фальшивый терминал» мы будем фокус в текстовое поле и когда пользователь начнет печатать, мы просто добавим данные, введенные в текстовое поле, к нашему «терминалу», и это .

HERE демонстрационный в действии

(источник: Michael Jasper's post)

---

Другое решение

Я changed how it works, и, кажется, решить несколько вопросов :)

• принимает любой текст нормальный вход может
• Backspace работает
• Теоретически может поддерживать вставки текста

Обычные оговорки применяются еще, в первую очередь, неспособность визуально увидеть, где находится карет.

Я думаю, долго и трудно ли это решение стоит реализации, исходя из своих недостатков и проблем юзабилити.

HTML

<div id="cmd"> 
    <span></span> 
    <div id="cursor"></div> 
</div> 

<input type="text" name="command" value=""> 

CSS

#cmd { 
    font-family: courier; 
    font-size: 14px; 
    background: black; 
    color: #21f838; 
    padding: 5px; 
    overflow: hidden; 
} 

#cmd span { 
    float: left; 
    padding-left: 3px; 
    white-space: pre; 
} 

#cursor { 
    float: left; 
    width: 5px; 
    height: 14px; 
    background: #21f838; 
} 

input { 
    width: 0; 
    height: 0; 
    opacity: 0; 
} 

JQuery

$(function() { 
    var cursor; 
    $('#cmd').click(function() { 
     $('input').focus(); 
     cursor = window.setInterval(function() { 
      if ($('#cursor').css('visibility') === 'visible') { 
       $('#cursor').css({ 
        visibility: 'hidden' 
       }); 
      } else { 
       $('#cursor').css({ 
        visibility: 'visible' 
       }); 
      } 
     }, 500); 

    }); 

    $('input').keyup(function() { 
     $('#cmd span').text($(this).val()); 
    }); 

    $('input').blur(function() { 
     clearInterval(cursor); 
     $('#cursor').css({ 
      visibility: 'visible' 
     }); 
    }); 
}); 

Answer 2

Используйте современные CSS!

input { 
    caret-color : red; 
} 

Browser Support - 56% as of Aug 2017