【问题标题】:Styling text input caret样式化文本输入插入符号
【发布时间】:2011-11-12 10:50:06
【问题描述】:

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

【问题讨论】:

  • 好吧,我猜这是给<input type="text"/>
  • 他正在寻找插入符号、编辑问题和标签的样式
  • 请考虑更改接受的答案。鉴于最新的 CSS 更改,Michael Jasper 的更新答案要好得多:stackoverflow.com/a/7339406/1889273

标签: html css input caret


【解决方案1】:

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

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

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

HERE 是一个实际演示


2018 年更新

new css property caret-color 适用于inputcontenteditable 区域的插入符号。支持正在增长但不是 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 */
    }
&lt;input type="text"/&gt;

适用于 WebKit 浏览器(但不适用于 iOS Safari,仍然使用系统颜色作为插入符号)以及 Firefox。

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

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

【讨论】:

    【解决方案6】:

    input{
      caret-color: rgb(0, 200, 0);
    }
    &lt;input type="text"/&gt;

    【讨论】:

      【解决方案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>

      【讨论】:

        猜你喜欢
        • 2012-03-06
        • 1970-01-01
        • 1970-01-01
        • 2011-11-18
        • 2016-09-28
        • 2018-06-08
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多