2018更新

Question

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

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: #ccc;
    text-shadow: none;
    -webkit-text-fill-color: initial;
}

以下是一个示例：http://jsfiddle.net/8k1k0awb/

Answer 2

'Caret'就是您要找的词。我确实相信，它是浏览器设计的一部分，而不是在css的掌握之中。

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

我们将在视图中的屏幕中的某个地方放置一个简单的textarea 观众和当用户点击我们的“假终端”时，我们会专注于textarea，当用户开始输入时，我们将简单地将输入到textarea的数据附加到我们的“终端”，那就是这一点。

HERE是一个实际的演示

2018更新

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

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

<input type="text"/>

Answer 3

在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属性.Safion Technical Preview和Opera中也提供支持（但尚未在Edge中）。您可以查看当前支持表here。

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属性指定填充颜色 文字字符。如果未设置此属性，则为该值使用颜色属性。 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>

样式文本输入插入符号

7 个答案:

2018更新