修改插入高度

Question

我有this示例为我的问题。
在那里，有一个<span>与属性contenteditable几乎是input。插入的文本与5行文本“span”完全相同（除红色外）。

我希望插入符号（文本插入位置光标垂直条）成为绿色背景的高度。在这种情况下，高度为18像素。 Image与它现在是如何（左侧）和我想要它（右侧）。 *看看红色

我不想要一个看起来像黄色边框的分离元素超过插入符号。除非您可以将background-color设为绿色，并将文字顶部的background-image设置为透明和黄色。

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

好。只是改变渐变背景只是一个background-color:green，加border-bottom:1px solid #fbbc05（黄色）

加上加line-height:20px;font-size:16px所有的跨度（即使使用的数字，因为在这种情况下，你需要有完全准确像素完美的结果，如果你使用奇像素他们可能不会完全显示在屏幕上）

，并添加line-height:19px到SPAN＃输入（1像素为边界）

看到片断低于或jsfiddle

让我知道它是否工作

后来编辑：插入符号本身不能用CSS修改。你可以尝试制作一个自定义的插页。 （见这个问题上所以下面链接等答案）

看到这里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>