Modify Caret Height

Question

I have this example for my problem.
In there, there is a <span> with the attribute contenteditable that pretty much is a input. The text inserted inside is exactly equal to the 5 lines text "span" (except it's red).

I want the caret (text insertion position cursor vertical bar) to be the height of the green background. In this case, to be 18 pixels height. Image with how it is right now (left side) and how I want it (right side). *look at the red

I don't want a seperated element that looks like the yellow border to be over the caret. Unless you could make the background-color green and move the background-image on top of the text as transparent and yellow.

HTML
<div style=background:gray><span>span</span><br><span>span</span><br><span>span</span><span id=input contenteditable style="background-image:linear-gradient(green calc(100% - 1px),#fbbc05 1px);color:#ea4335;outline-style:none;width:300px"></span><br><span>span</span><br><span>span</span></div>

CSS
body{background:#202020;margin:0} span{color:#fff;display:inline-block;font-family:consolas}

[email protected]

Answer 1

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>