去除输入框闪烁光标CSS技巧对Emoji失效的解决方案

方案1：使用caret-color属性（推荐） #

这是最简洁的现代方案，专门针对输入光标颜色设置，完全不影响输入框内文本和Emoji的显示效果，同时输入框保持可聚焦状态，能正常监听键盘事件。

HTML：

<input type="text" value="😀 自定义选择内容" />

CSS：

input {
  caret-color: transparent; /* 将光标设为透明，视觉上完全隐藏 */
  /* 可保留其他样式，比如边框、内边距等 */
  border: 1px solid #ccc;
  padding: 6px 10px;
  border-radius: 4px;
}

JavaScript（监听ESC键）：

const customInput = document.querySelector('input');
customInput.addEventListener('keydown', (e) => {
  if (e.key === 'Escape') {
    // 执行隐藏自定义下拉菜单的逻辑
    // 示例：document.querySelector('.custom-dropdown').style.display = 'none';
  }
});

方案2：透明输入框+外置显示元素（兼容旧场景） #

如果需要兼容不支持caret-color的旧浏览器（如IE），可以用这个方案：用完全透明的输入框接收交互和键盘事件，同时用相邻元素展示内容，既看不到光标，又能保留Emoji的原始颜色。

HTML：

<div class="custom-select-container">
  <input type="text" value="😀 自定义选择内容" class="transparent-input" />
  <span class="content-display"></span>
</div>

CSS：

.custom-select-container {
  position: relative;
  display: inline-block;
}
.transparent-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 1;
  /* 确保输入框可聚焦，不影响事件监听 */
}
.content-display {
  display: inline-block;
  padding: 6px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  min-width: 120px;
}

JavaScript：

const input = document.querySelector('.transparent-input');
const display = document.querySelector('.content-display');

// 初始化显示内容
display.textContent = input.value;

// 同步输入框值到显示元素
input.addEventListener('input', () => {
  display.textContent = input.value;
});

// 监听ESC键隐藏下拉菜单
input.addEventListener('keydown', (e) => {
  if (e.key === 'Escape') {
    // 执行隐藏下拉菜单的逻辑
  }
});

为什么之前的方案失效？ #

你之前用的color: transparent + text-shadow方法，会强制将Emoji的颜色替换为text-shadow的颜色——因为Emoji的渲染依赖于color属性，这个方法本质是用阴影模拟文本显示，自然会破坏Emoji的原有色彩。

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