我的问题有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}
cowene@30wave.com
答案 0 :(得分：1)
好。只需将渐变背景更改为background-color:green，添加border-bottom:1px solid #fbbc05（黄色）
加上line-height:20px;font-size:16px添加到所有跨度（使用偶数，因为在这种情况下，您需要具有完全像素完美的结果，如果您使用奇数像素，它们可能无法在屏幕上完美显示）
并将line-height:19px添加到span＃input（1px是边框）
请参阅下面的代码段或 jsfiddle
让我知道它是否有效
LATER EDIT：Caret本身不能用CSS修改。你可以尝试制作一个自定义插入符号。 （参见下面的链接和关于此主题的SO的其他答案）
见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>