“Caret”是你要找的词，但我相信它是浏览器设计的一部分，不在css的掌握范围之内。
然而，这里有一篇关于 * 使用Javascript和CSS* http://www.dynamicdrive.com/forums/showthread.php?t=17450模拟插入符号更改的有趣文章。我觉得这有点笨拙，但可能是完成这项任务的唯一方法。
我们将在屏幕上的某个地方有一个纯文本区域，当用户点击我们的“假终端”时，我们将专注于文本区域，当用户开始键入时，我们将简单地将键入文本区域的数据附加到我们的“终端”上，就这样。

HERE是实际演示

2018年更新

有一个new css property caret-color应用于input或contenteditable区域的插入符号。支持正在增长，但不是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/

在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也支持caret-color属性（但Edge还不支持caret-color属性）。您可以在此处查看当前的支持表。

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

::-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属性指定文本的字符的填充颜色。如果未设置此属性，则使用color属性的值。MDN
所以这意味着我们用text-fill-color设置文本颜色，用standard 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>

当我试图建立一个像网站一样的终端时，我知道没有办法（还）使用CSS来改变光标的样式。
但是你可以改变另一个答案中显示的颜色。
然后，经过近3天的研究，我得到了一个想法从检查网站（对不起，我不能提供链接）
它在command string中添加和删除一个HTML span元素，并创建一个块光标，但如果您知道插入符号的位置，只需使用一点CSS，就可以创建任何插入符号。
我不建议将此用于生产应用程序。
这帮助我创建了一个如in my site所示的插入符号
您可以在this repo中看到源代码

• • 摘要：**

假设您的文本是echo Hello，在H之后带有插入符号。

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

希望能有所帮助;-）