如何修改输入框中typer的颜色且不改变文本本身的颜色

修改输入框光标颜色不影响文本颜色的实现方案 #

你要的效果可以直接通过CSS原生属性caret-color实现，该属性的作用就是单独控制输入框、可编辑div、文本域等元素的插入光标颜色，和文本颜色属性color完全独立，不会互相影响。

基础用法（兼容绝大多数现代浏览器）

/* 全局设置所有输入类元素的光标颜色 */
input, textarea, [contenteditable="true"] {
  /* 你可以替换成任意颜色值：十六进制、rgb、rgba、颜色名均可 */
  caret-color: #ff4d4f;
  /* 文本颜色单独设置，和光标颜色互不干扰 */
  color: #333;
}

该属性的兼容性覆盖Chrome 57+、Firefox 53+、Safari 11.1+、Edge 79+，满足绝大多数场景的使用需求。

旧版浏览器兼容方案

如果需要适配Safari 11.1以下的旧版本浏览器，可以使用text-shadow配合-webkit-text-fill-color的hack方案实现：

input {
  /* 光标会继承color属性的颜色 */
  color: #ff4d4f;
  /* text-shadow设置的颜色会作为文本实际显示的颜色 */
  text-shadow: 0 0 0 #333;
  -webkit-text-fill-color: transparent;
}
/* 额外修复选中文本的显示效果 */
input::selection {
  background: #91d5ff;
  text-shadow: none;
  -webkit-text-fill-color: #333;
}

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