造型文字input插页

我想要devise一个焦点<input type='text'/>的插入符号。 具体来说就是颜色和厚度。

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

'Caret'是你正在寻找的词。 我相信虽然，它是浏览器devise的一部分，而不是在CSS的掌握。

但是，这里有一个有趣的写在使用JavaScript和CSS模拟插入符号的变化 http://www.dynamicdrive.com/forums/showthread.php?t=17450这似乎有点哈克我，但可能是唯一的方法完成任务。; 文章的主要观点是：

我们将在屏幕的某个地方出现一个纯粹的textarea，当用户点击我们的“假terminal”时，我们将把焦点放在textarea上，当用户开始input时，我们将简单地将input的数据附加到textarea到我们的“terminal”就是这样

这里是一个演示

在CSS3中，现在有一个原生的方法来做到这一点，没有任何现有的答案build议黑客： caret-color属性 。

如下所示，可以对插入符号做很多事情。 它甚至可以是animation 。 

 /* 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中）。 您可以在这里查看当前的支持表。

这里有一些供应商，你可能会找我 

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

使用颜色属性和-webkit-text-fill-color一起使用就足够了： 

  input { color: red; /* color of caret */ -webkit-text-fill-color: black; /* color of text */ } 
 <input type="text"/>
Interesting Posts