【代码片段】如何使用CSS来快速定义多彩光标
对于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
相关推荐
qiupu 2020-11-04
多读书读好书 2020-11-03
RedCode 2020-10-28
jiedinghui 2020-10-25
Ladyseven 2020-10-22
hellowzm 2020-10-12
zuncle 2020-09-28
Ladyseven 2020-09-11
jiedinghui 2020-09-07
xiaohuli 2020-09-02
葉無聞 2020-09-01
impress 2020-08-26
ThikHome 2020-08-24
nicepainkiller 2020-08-20
hellowzm 2020-08-18