Styling Text Input Caret

Styling text input caret

If you are using a webkit browser you can change the color of the caret by following the next CSS snippet. I'm not sure if It's possible to change the format with CSS.

input,
textarea {
    font-size: 24px;
    padding: 10px;
    
    color: red;
    text-shadow: 0px 0px 0px #000;
    -webkit-text-fill-color: transparent;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color:
    text-shadow: none;
    -webkit-text-fill-color: initial;
}

Here is an example: http://jsfiddle.net/8k1k0awb/

Styling the caret in an input text area

Isn't it the same style as the input itself (color, font-size, etc..) ?
Here it is green.
Sample Image

css change the input cursor/caret color

you can assign an image to any element for cursor by this option

div {
   cursor: url(YOUR_IMAGE_URL), auto;
}

How can I change input blink caret style with easy css, js

I don't think it is so hard. I made a quick example, which works in most modern browsers except Safari.
It draws the caret on a canvas, and sets it as a background of the input, on a position calculated from the browsers caret position.

It checks if the browser supports the caret-color css property, and if it doesn't it doesn't do anything, because both the system caret, and our caret will be visible in the same time. From the browsers I tested, only Safari doesn't support it.

$("input").on('change blur mouseup focus keydown keyup', function(evt) {  var $el = $(evt.target);  //check if the carret can be hidden  //AFAIK from the modern mainstream browsers  //only Safari doesn't support caret-color  if (!$el.css("caret-color")) return;  var caretIndex = $el[0].selectionStart;  var textBeforeCarret = $el.val().substring(0, caretIndex);
  var bgr = getBackgroundStyle($el, textBeforeCarret);  $el.css("background", bgr);  clearInterval(window.blinkInterval);  //just an examplethis should be in a module scope, not on window level  window.blinkInterval = setInterval(blink, 600);})
function blink() {   $("input").each((index, el) => {    var $el = $(el);    if ($el.css("background-blend-mode") != "normal") {      $el.css("background-blend-mode", "normal");    } else {      $el.css("background-blend-mode", "color-burn");    }  });}

function getBackgroundStyle($el, text) {  var fontSize = $el.css("font-size");  var fontFamily = $el.css("font-family");
  var font = fontSize + " " + fontFamily;  var canvas = $el.data("carretCanvas");  //cache the canvas for performance reasons  //it is a good idea to invalidate if the input size changes because of the browser text resize/zoom)  if (canvas == null) {    canvas = document.createElement("canvas");    $el.data("carretCanvas", canvas);    var ctx = canvas.getContext("2d");    ctx.font = font;    ctx.strokeStyle = $el.css("color");    ctx.lineWidth = Math.ceil(parseInt(fontSize) / 5);    ctx.beginPath();    ctx.moveTo(0, 0);    //aproximate width of the caret    ctx.lineTo(parseInt(fontSize) / 2, 0);    ctx.stroke();  }  var offsetLeft = canvas.getContext("2d").measureText(text).width + parseInt($el.css("padding-left"));  return "#fff url(" + canvas.toDataURL() + ") no-repeat " +    (offsetLeft - $el.scrollLeft()) + "px " +    ($el.height() + parseInt($el.css("padding-top"))) + "px";}

input {  caret-color: transparent;  padding: 3px;  font-size: 15px;  color: #2795EE;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><input type="text" />

Styling Text Input Caret