html - 是否有使用现代 css 样式更改输入元素中信号灯粗细的解决方案？

Question

关于问题: 该链接是具有自定义 CSS 样式的输入元素的 inVision 设计。
如您所见，除底线外，它的边框已被删除，并且光标/闪烁器看起来很粗。

这是我到目前为止所做的。

<input class="custom-input" />

.custom-class {
      border: none;
      border-bottom: #eee solid 3px;
      line-height: 2;
      font-size: 36px;
      text-align: center;
      caret-color: #231F20;
}

到目前为止缺少的是方向灯仍然是普通的。 我已经通过研究来寻找答案。有很多关于 caret-color 的文章和 StackOverflow 答案，但没有一个回答如何改变它的粗细。

此外，还有一个 codepen 演示，用于通过使内容可编辑来使用 span 元素。

但我的问题是“在经过现代 css 的所有演变之后，是否有仅使用 css 样式的解决方案？”

提前致谢。

附言。我不是在寻找 caret-color 属性解决方案。我说的是方向灯的具体厚度。

Answer 1

我不知道你是否可以修改文本插入符号的粗细(我只看到 one related 属性)，但你可以使用 caret-color 更改它的颜色.

有seems to be一些使用 OS 工具更改插入符粗细的方法，但目前在 css 中还没有。

编辑 还有另一种自定义插入符的方法:使用js在经典插入符之上创建一个新插入符( src -> link , src2 -> link2 (jQuery 插件))。

我forked一个codepen ，而且我认为您可以使用“自定义插入符”来隐藏真实的插入符 :)