【代码片段】如何使用CSS来快速定义多彩光标
2024-08-24 03:25:30
对于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效果，请立刻留言和我分享，感谢阅读~~
最新文章
- 使用C#将HTML文本转换为普通文本，去掉所有的Html标记(转)
- Java 如何快速序列化
- 使用内核定时器的second字符设备驱动及测试代码
- 单片机C语言实现的采用DS18B20的温度检测装置
- 深入理解Tomcat系列之一：系统架构（转）
- .net程序调用检测和性能分析工具——DotTrace
- CoreCRM 开发实录 —— 单元测试之 Mock UserManager 和 SignInManager
- 因为本地没有配置 localhost 导致的 eclipse 的奇葩问题
- [Bayes] Variational Inference for Bayesian GMMs
- python已安装了一个包，但是导入包中的模块时报错没有这个包
- ubuntu 安装 google Gtest [转]有效性待验证
- asp.net处理机制管道事件
- Python 的文件处理
- Java生成代码（字节码）
- linux查看当前shell的方法
- “全栈2019”Java第七十章：静态内部类详解
- python——python数据结构之栈、队列的实现
- 蓝桥杯 算法训练 ALGO-93 反置数
- js，jquery和dojo操作dom
- NYOJ92 图像实用区域 【BFS】