如何在不禁用user-select的情况下隐藏闪烁文本光标？

想要保留文本的选中、复制功能，同时隐藏点击元素后出现的闪烁插入光标，可采用以下方法：

推荐方案：利用caret-color属性 #

给需要设置的元素添加CSS样式，将光标颜色设为透明即可，完全不影响文本选中功能：

.your-target-class {
  caret-color: transparent;
}

该属性支持绝大多数现代浏览器，实现简单且效果稳定。

旧浏览器兼容方案 #

如果需要兼容不支持caret-color的旧版本浏览器，可通过伪元素模拟覆盖光标（效果略逊于前者）：

.your-target-class {
  position: relative;
}

.your-target-class:focus::after {
  content: '';
  position: absolute;
  height: 1.2em; /* 与文本行高匹配 */
  border-left: 1px solid transparent;
}

内容的提问来源于stack exchange，提问作者Brian