5

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}

cowene@30wave.com

user7393973
  • 2,270
  • 1
  • 20
  • 58

1 Answers1

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>
Community
  • 1
  • 1
Mihai T
  • 17,254
  • 2
  • 23
  • 32
  • When I change the `border-bottom` in the JSFiddle to 1px and run the code, it's just like my JSFiddle. [Image](http://i.imgur.com/kyE0StP.png). – user7393973 Jan 09 '17 at 16:24
  • I don't wanna change the font-size because that will make the text smaller. – user7393973 Jan 09 '17 at 16:28
  • well...either you change all the spans and set `font-size:16px` either you make a custom caret . as the Caret itself cannot be modified with CSS see here http://stackoverflow.com/questions/15249288/how-to-adjust-the-caret-blinking-cursor-size-inside-searchbar-with-css – Mihai T Jan 09 '17 at 16:32
  • Can you make an example in JSFiddle with either of thoses options? I know that custom carets don't normally work the same and are super complex. – user7393973 Jan 09 '17 at 16:34
  • edited my answer with the changes ( snippet and jsfiddle also ) . check it out – Mihai T Jan 09 '17 at 16:40
  • It's still [different](http://i.imgur.com/zZXv2M1.png). Adding a border makes 1 of 2: add space between the lines; decrease the size of the font. – user7393973 Jan 09 '17 at 17:11
  • As a red-green (partially) color blind person I find your example kinda unhelpful. :'( – zrajm Jul 14 '19 at 22:40
  • @zrajm sorry. Didn't mean that :) I just used the colors provided by the OP in his question. – Mihai T Jul 16 '19 at 11:53