样式文本输入插入符号

Question

我想为焦点<input type='text'/>的脱字符设置样式。 具体来说，颜色和厚度。

Answer 1

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

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

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

这里是一个演示在行动

---

2018年更新

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

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

 <input type="text"/>

Answer 2

如果您使用的是 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/

Answer 3

在 CSS3 中，现在有一种本地方法可以做到这一点，而没有现有答案中建议的任何技巧： caret-color属性。

您可以使用插入符号做很多事情，如下所示。 它甚至可以是动画。

/* 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 Technical Preview 和 Opera（但尚未在 Edge 中）也提供支持。 您可以在此处查看当前的支持表。

Answer 4

这里有一些你可能要找的供应商

::-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;}

Answer 5

以这种方式将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 属性指定text 字符的填充颜色。 如果未设置此属性，则使用颜色属性的值。 MDN

所以这意味着我们使用 text-fill-color 设置文本颜色，使用标准颜色属性设置插入符号颜色。 在不受支持的浏览器中，插入符号和文本将具有相同的颜色——插入符号的颜色。

Answer 6

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

 <input type="text"/>

Answer 7

很简单。 只需像这样添加 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>