对于web开发中，我们经常都看得到需要输入内容的组件和元素，比如，textarea，或者可编辑的DIV(contenteditable) ，如果你也曾思考过使用相关方式修改一下光标颜色的，那么这篇技术小分享，你绝对不应该错过哈~
使用如下的CSS代码即可实现光标颜色的设定
CSS
???input, ???textarea, ???[contenteditable] { ?????caret-color: orange; ???}相关HTML
?<input type="text" placeholder="邮件"> ?<br><br> ?<textarea name="comments" id="" cols="30" rows="10"></textarea> ?<br><br> ?<div contenteditable>igeekbar.com - 请点击我</div>
在线演示
地址：http://www.igeekbar.com/igclass/code/c986f33e-c8af-482d-ad98-984dbacbad60.htm
如果想更好玩的话，可以让你的光标在输入框中支持多颜色变化
CSS代码
?@keyframes rainbow { ???0% { caret-color: red; } ???20% { caret-color: orange; } ???40% { caret-color: yellow; } ???60% { caret-color: green; } ???80% { caret-color: blue; } ???100% { caret-color: purple; } ?} ?input { ???padding:10px; ???font-size:18px; ???width:80%; ???caret-color: orange; ???display: block; ???margin-bottom: .5em; ?} ?input:focus { ???animation: 3s infinite rainbow; ?}body { ???background-color: orange; ?}以上代码使用keyframe来生成动画效果，再设置为input:focus属性中，这样用户点击输入框，都会生成不同的光标颜色， 非常有趣，大家有兴趣可以点击下面链接尝试一下
在线演示：http://www.igeekbar.com/igclass/code/148e9cb3-61be-4954-9447-c931eb4e7c4d.htm
是不是有点意思， 如果大家有更好玩的光标CSS效果，请立刻留言和我分享，感谢阅读~~
【代码片段】如何使用CSS来快速定义多彩光标
原文地址：http://www.cnblogs.com/gbin1/p/7456420.html