样式化文本输入插入符号

Posted 2023-02-19

【中文标题】样式化文本输入插入符号

【英文标题】：Styling text input caret

【发布时间】：2011-11-12 10:50:06

【问题描述】：

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

【问题讨论】：

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

他正在寻找插入符号、编辑问题和标签的样式

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

【参考方案1】：

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

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

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

HERE 是一个实际演示

---

2018 年更新

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

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

<input type="text"/>

【讨论】：

这应该是公认的答案，就像一个魅力 - 谢谢:)

有什么方法可以在input 元素上设置自定义光标，还是唯一的解决方案是一种骇人听闻的解决方法？

还有caret-shape（我们可以在这里设置auto | bar | block | underscore）和简写caret。太糟糕了，他们目前是supported by no one（在写这篇文章时甚至没有Can I use）

【参考方案2】：

如果您使用的是 webkit 浏览器，您可以按照下一个 CSS sn-p 更改插入符号的颜色。我不确定是否可以使用 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/

【讨论】：

一个聪明的技巧，但表情符号不起作用，因为它们只是被阴影填满了?

嗯，在我的情况下不需要阴影效果（桌面 Chrome 和 FF）——只需编辑文本填充颜色然后输入。

【参考方案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 属性。Safari 技术预览版和 Opera 中也提供支持（但 Edge 尚不支持）。您可以查看当前支持表here。

【讨论】：

打我一拳。当然，这个属性只能在 Firefox 中使用，至少目前是这样，并且要到 2017 年 4 月才会发布。请参阅this 页面。

【参考方案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;

【讨论】：

这对于设置占位符文本的样式很有用，但它不会设置 OP 引用的闪烁插入符号的样式。

【参考方案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 设置文本颜色，使用标准颜色属性设置插入符号颜色。在不受支持的浏览器中，插入符号和文本将具有相同的颜色 - 插入符号的颜色。

【参考方案6】：

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

<input type="text"/>

【参考方案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>