我想设计一个专注的<input type='text'/> 的插入符号。具体来说就是颜色和厚度。
【问题讨论】：
<input type="text"/>的
'Caret' 是您要查找的单词。不过我确实相信，它是浏览器设计的一部分，而不是在 css 的掌握范围内。
然而，这里有一篇关于使用 Javascript 和 CSS 模拟插入符号更改的有趣文章http://www.dynamicdrive.com/forums/showthread.php?t=17450 这对我来说似乎有点 hacky，但可能是完成任务的唯一方法。文章的主要观点是：
我们将在视图之外的屏幕某处有一个纯文本区域 查看器，当用户点击我们的“假终端”时，我们将 专注于文本区域，当用户开始输入时，我们将简单地 将输入文本区域的数据附加到我们的“终端”，那就是 那个。
HERE 是一个实际演示
new css property caret-color 适用于input 或contenteditable 区域的插入符号。支持正在增长但不是 100%，这只会影响颜色，而不影响宽度或其他类型的外观。
input{
caret-color: rgb(0, 200, 0);
}<input type="text"/>【讨论】：
input 元素上设置自定义光标，还是唯一的解决方案是一种骇人听闻的解决方法？
caret-shape（我们可以在这里设置auto | bar | block | underscore）和简写caret。太糟糕了，他们目前是supported by no one（在写这篇文章时甚至没有Can I use）
如果您使用的是 webkit 浏览器，您可以按照下一个 CSS sn-p 更改插入符号的颜色。我不确定是否可以使用 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/
【讨论】：
在 CSS3 中，现在有一种本机方法可以做到这一点，而没有现有答案中建议的任何技巧：the caret-color property。
您可以使用插入符号做很多事情，如下所示。甚至可以be animated。
/* Keyword value */
caret-color: auto;
color: transparent;
color: currentColor;
/* <color> values */
caret-color: red;
caret-color: #5729e9;
caret-color: rgb(0, 200, 0);
caret-color: hsla(228, 4%, 24%, 0.8);
Firefox 55 和 Chrome 60 支持 caret-color 属性。Safari 技术预览版和 Opera 中也提供支持（但 Edge 尚不支持）。您可以查看当前支持表here。
【讨论】：
这里有一些你可能正在寻找的供应商
::-webkit-input-placeholder {color: tomato}
::-moz-placeholder {color: tomato;} /* Firefox 19+ */
:-moz-placeholder {color: tomato;} /* Firefox 18- */
:-ms-input-placeholder {color: tomato;}
您还可以设置不同状态的样式，例如焦点
:focus::-webkit-input-placeholder {color: transparent}
:focus::-moz-placeholder {color: transparent}
:focus:-moz-placeholder {color: transparent}
:focus:-ms-input-placeholder {color: transparent}
你也可以在它上面做一些过渡，比如
::-VENDOR-input-placeholder {text-indent: 0px; transition: text-indent 0.3s ease;}
:focus::-VENDOR-input-placeholder {text-indent: 500px; transition: text-indent 0.3s ease;}
【讨论】：
这样使用 color 属性和 -webkit-text-fill-color 就足够了：
input {
color: red; /* color of caret */
-webkit-text-fill-color: black; /* color of text */
}<input type="text"/>适用于 WebKit 浏览器（但不适用于 iOS Safari，仍然使用系统颜色作为插入符号）以及 Firefox。
-webkit-text-fill-color CSS 属性指定填充颜色 文本字符。如果未设置此属性，则 使用颜色属性。 MDN
所以这意味着我们使用 text-fill-color 设置文本颜色，使用标准颜色属性设置插入符号颜色。在不受支持的浏览器中，插入符号和文本将具有相同的颜色 - 插入符号的颜色。
【讨论】：
input{
caret-color: rgb(0, 200, 0);
}<input type="text"/>【讨论】：
这很简单。 只需像这样添加 caret-color 属性：
* {cursor: url(http://labs.semplice.com/wp-content/uploads/2020/02/custom-cursor-arrow.png) 20 20, auto;}
input, div {padding: 20px;}<input style="caret-color: rgb(0, 200, 0);">
<br>
<textarea style="caret-color: blue;"></textarea>
<br>
<div contenteditable style="padding: 5px; border: 1px solid black;border-color: black;caret-color: red"></div>【讨论】：