css设置input/textarea的光标

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;

css设置input/textarea的光标
文章图片

1.3 示例
body { padding: 50px; }input, textarea { color: transparent; text-shadow: 0 0 0 red; }


css设置input/textarea的光标
文章图片

2. 不显示光标(方法2)
2.1 代码
caret-color: transparent;

2.2 兼容性
css设置input/textarea的光标
文章图片

2.3 示例图片
css设置input/textarea的光标
文章图片

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 示例图片
css设置input/textarea的光标
文章图片

    推荐阅读