小开

“卡雷特”是你要找的单词。但是我确实相信，这是浏览器设计的一部分，而不是在 css 的掌握之中。

然而，这里有一个有趣的写作关于 使用 Javascript 和 CSS 模拟插入符号的更改 http://www.dynamicdrive.com/forums/showthread.php?t=17450它似乎有点粗糙，对我来说，但可能是唯一的方式来完成任务。该条的要点是:

我们将有一个纯文本区域在屏幕的某个地方，在视图之外当用户点击我们的“虚拟终端”时，我们将聚焦到文本区域，当用户开始键入时，我们将简单地将输入到文本区的数据附加到我们的“终端”，即那个。

下面是一个实际应用的演示

二零一八年最新情况

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

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

<input type="text"/>

小开

最佳答案

如果您正在使用 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/

小开

这里有一些供应商，你可能会我寻找

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

小开

在 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);

Firefox55和 Chrome60支持 caret-color属性。在 Safari 技术预览版和 Opera 中也提供了支持(但是在 Edge 中还没有)。您可以查看当前的支持表给你。

小开

这样使用颜色属性和 - webkit-text-fill-color属性就足够了:

    input {
color: red; /* color of caret */
-webkit-text-fill-color: black; /* color of text */
}

<input type="text"/>

Works in WebKit browsers (but not in iOS Safari, where is still used system color for caret) and also in Firefox.

The -webkit-text-fill-color CSS property specifies the fill color of characters of text. If this property is not set, the value of the color property is used. MDN

So this means we set text color with text-fill-color and caret color with standard color property. In unsupported browser, caret and text will have same color – color of the caret.

小开

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

<input type="text"/>

小开

很简单。只需像下面这样添加插入符号颜色属性:

* {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>

小开

当我试图建立一个终端像网站我得知，有没有办法(还没有)改变样式的光标使用 CSS。

但是您可以更改插入符号的颜色，如另一个答案所示。

然后，经过近3天的研究，我得到了一个想法，从检查一个网站(对不起，我不能提供的链接)

它在 command string中添加和删除了一个 HTML span 元素，并制作了一个块光标，但是如果您知道插入符号的位置，只需要一点 CSS，就可以制作任何插入符号。

我不会在生产应用程序中推荐这种方法。

这帮助我创建了一个插入符号，就像你看到的在我的网站上

您可以在这个回购中看到源代码

摘要:

假设您的文本是 echo Hello，在 H之后加插入符号。那么代码可能是

<div>
<span>
echo H
</span>
<span calss="animmate-blink" >  <!-- This span will act as your caret -->
e
</span>
<span>
llo
</span>
</div>

希望能有所帮助; -)

样式化文本输入插入符号

二零一八年最新情况