1. 不显示光标（方法1）
1.1 代码
input,
textarea {
color: transparent;
text-shadow: 0 0 0 red;
}
1.2
text-shadow 属性说明text-shadow: h-shadow v-shadow blur color;
文章图片
1.3 示例
- 锐客网 body {
padding: 50px;
}input,
textarea {
color: transparent;
text-shadow: 0 0 0 red;
}
文章图片
2. 不显示光标（方法2）
2.1 代码
caret-color: transparent;
2.2 兼容性
文章图片
2.3 示例图片
文章图片
3. 不隐藏光标，改变光标颜色
3.1 代码
输入框文本为
#333 ，光标为 red。input {
color: #333;
caret-color: red;
}
@supports (-webkit-mask: none) and (not (cater-color: red)) {
input { color: red;
}
input::first-line { color: #333;
}
}【css设置input/textarea的光标】3.2 示例图片
文章图片
推荐阅读
- web网页模板|如此优秀的JS轮播图，写完老师都沉默了
- JavaScript|JavaScript之DOM增删改查(重点)
- 网络|一文彻底搞懂前端监控
- css|我用css精灵图拼接了自己的英文名字，不会还有人不知道精灵图技术吧（）
- css|css三角的做法及其案例
- css|css中元素的显示与隐藏
- JavaWeb|JavaWeb学习——CSS
- flex|C语言-使用goto语句从循环中跳出
- java|你跳一次涨多少（今天见识到跳槽天花板！！）