样式化文本输入插入符

Question

我想设计一个重点 <input type='text'/> 的插入符号。具体来说，颜色和厚度。

原文由 Randomblue 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果您使用的是 webkit 浏览器，则可以按照下一个 CSS 片段更改插入符号的颜色。我不确定是否可以使用 CSS 更改格式。

 input,
textarea {
    font-size: 24px;
    padding: 10px;

    color: red;
    text-shadow: 0px 0px 0px #000;
    -webkit-text-fill-color: transparent;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color:
    text-shadow: none;
    -webkit-text-fill-color: initial;
}

这是一个例子：http: //jsfiddle.net/8k1k0awb/

原文由 Nestor Britez 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

‘Caret’ 是您要查找的词。不过我确实相信，它是浏览器设计的一部分，而不是在 css 的控制范围内。

然而，这里有一篇关于 使用 Javascript 和 CSS 模拟插入符更改 的有趣文章 http://www.dynamicdrive.com/forums/showthread.php?t=17450 这对我来说似乎有点老套，但可能是唯一的方法完成任务。文章的要点是：

我们将在屏幕中某处查看器视图之外的地方有一个纯文本区域，当用户单击我们的“假终端”时，我们将聚焦到文本区域中，当用户开始输入时，我们将简单地将输入的数据附加到文本区域中到我们的“终端”，就是这样。

这 是一个实际演示

---

2018更新

有一个 新的 css 属性 caret-color 适用于 input 或 contenteditable 区域的插入符号。支持在增长，但不是 100%，这只会影响颜色，不会影响宽度或其他类型的外观。

 input{
  caret-color: rgb(0, 200, 0);
}

 <input type="text"/>

原文由 Michael Jasper 发布，翻译遵循 CC BY-SA 4.0 许可协议