样式文本输入插入符号

Question

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

Answer 1

'Caret'就是你要找的词.我确实相信,它是浏览器设计的一部分,而不是在CSS的掌握之内.

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

我们将在屏幕上的某个地方放置一个普通的文本区域,当用户点击我们的"假终端"时,我们将关注到textarea,当用户开始输入时,我们只需将输入的数据附加到textarea中我们的"终端"就是这样.

这是一个实际的演示

2018年更新

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

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

<input type="text"/>

Answer 2

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

在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支持该属性.Safion Technical Preview和Opera中也提供支持(但尚未在Edge中).您可以在此处查看当前支持表.

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