修改插入符高度

Question

我有 this 个例子来解决我的问题。
在那里，有一个 ，其属性 contenteditable 几乎是一个 input。里面插入的文字正好等于5行文字"span"（除了是红色的）

我希望插入符号（文本插入位置光标垂直条）为绿色背景的高度。在本例中，高度为 18 像素。 Image 现在的样子（左侧）和我想要的样子（右侧）。 *看红色

我不希望看起来像黄色边框的分隔元素位于插入符上方。除非您可以将 background-color 设为绿色并将文本顶部的 background-image 移动为透明和黄色。

HTML
<div style=background:gray>span span span span span</div>

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

考恩@30wave.com

Answer 1

嗯。只需将渐变背景更改为 background-color:green ，添加 border-bottom:1px solid #fbbc05 （黄色）

加上 line-height:20px;font-size:16px 到所有跨度（使用偶数，因为在这种情况下，您需要完全精确的像素完美结果，如果您使用奇数像素，它们可能无法完美显示在屏幕上）

并添加 line-height:19px 到 span#input（1px 是边框）

请参阅下面的代码段或 jsfiddle

让我知道它是否有效

后期编辑：不能用 CSS 修改插入符本身。您可以尝试制作自定义插入符号。（请参阅下面的 link 以及有关此主题的其他答案）

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

修改插入符高度

Modify Caret Height

html

css

height

caret