How to Adjust the Caret (Blinking Cursor) Size Inside Searchbar with CSS

How to increase cursor caret thickness in HTML?

You can't change the way the cursor caret looks in a textarea. The most you can do is change the color. https://developer.mozilla.org/en-US/docs/Web/CSS/caret-color.

I suggest you take a look at these links too:

How to control cursor/caret size with CSS

How to adjust the Caret (blinking cursor) size inside searchbar with css

I hope I helped somewhat.

How to control cursor/caret size with CSS

There isn't any way to change how the caret looks in a textarea. If you want to do that, you'll have to use something other than a textarea, such as a div or a canvas element and control everything with JavaScript.

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" />

Modify Caret Height

well. just change the gradient background to just a background-color:green , add a border-bottom:1px solid #fbbc05 (yellow)

plus add line-height:20px;font-size:16px to all spans ( use even numbers because in this case where you need to have exactly exactly pixel-perfect result, if you use odd pixels they might not appear perfectly on the screen )

and add line-height:19px to the span#input ( 1px is the border )

see snippet below or jsfiddle

let me know if it works

LATER EDIT :the Caret itself cannot be modified with CSS . you can try making a custom caret . ( see link below and other answers on SO on this subject )

see here How to adjust the Caret (blinking cursor) size inside searchbar with css

body{background:#202020;margin:0}

span{color:#fff;display:inline-block;font-family:consolas;line-height:20px;font-size:16px;}
<div style=background:gray><span>span</span><br><span>span</span><br><span>span</span><span id=input contenteditable style="background-color:green;border-bottom:1px solid #fbbc05;color:#ea4335;outline-style:none;width:300px;line-height:19px;"></span><br><span>span</span><br><span>span</span></div>

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/



Related Topics



Leave a reply



Submit