118

我想将焦点的插入符号样式化<input type='text'/>。具体来说，颜色和厚度。

— 随机蓝
source

1

好吧，这是<input type="text"/>我的猜测

— Benjamin Crouzier 2011年

他希望为插入符号，已编辑的问题和标签添加样式

— 本杰明·乌丁克

请考虑更改接受的答案。鉴于CSS的最新更改，Michael Jasper的最新答案要好得多：stackoverflow.com/a/7339406/1889273

— Boaz

74

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

— 内斯特·布罗兹（Nestor Britez）
source

3

聪明的破解方法，但表情符号不起作用，因为它们只是被阴影所填充😭–

— simbolo

嗯，就我而言（台式Chrome和FF），不需要阴影即可生效-只需编辑输入的文本填充颜色即可。

— Velda

86

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

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

我们将在查看器视图之外的屏幕上的某个地方显示一个纯文本区域，当用户单击“假终端”时，我们将专注于该文本区域，而当用户开始键入内容时，我们只需将键入的数据附加到该文本区域中即可到我们的“终端”，就是这样。

这里是一个演示

2018年更新

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

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

<input type="text"/>

展开摘要

— 迈克尔·贾斯珀
source

38

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

caret-colorFirefox 55和Chrome 60支持该属性。Safari技术预览版和Opera（但Edge尚未提供）也提供支持。您可以在此处查看当前的支持表。

— 萨查·纳卡（Sacha Nacar）
source

1

打我一拳。当然，至少在目前，此属性仅在Firefox中可用，直到2017年4月才发布。请参阅此页面。

— SpyderScript '17

6

这是您可能会寻找的一些供应商

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

— 谢尔盖·赫梅列夫斯科伊（Sergey Khmelevskoy）
source

5

这对于设置placholder文本的样式很有用，但是不会为所引用的OP设置闪烁的插入符号的样式。

— craignewkirk

4

这样就可以将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中使用，在Safari中仍使用系统颜色作为尖号），也可在Firefox中使用。

-webkit-text-fill-color CSS属性指定text字符的填充颜色。如果未设置此属性，则使用color属性的值。MDN

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

— 维尔达
source

样式文字输入符号

2018年更新