html - 隐藏 `<input type="text">` 中的文本而不隐藏插入点

Question

我正在编写一个高级过滤工具，我想为查询字段提供实时语法高亮显示，这是一个标准 <input type="text"> .我通过监听更改、解析查询并在与文本相同的视觉位置显示突出显示的版本来执行此操作。我想在 <input> 的后面显示突出显示的文本为简单起见。然后，我需要做的就是在 <input> 中制作文本无形的。但是，这样做的明显方法(颜色:透明或不透明度:0)也会隐藏插入点。我试着摆弄 text-stroke和 text-shadow ，但无济于事。如何在不移动文本或隐藏插入点的情况下隐藏实际文本？

Answer 1

我最终得到的解决方案是将带样式的文本在视觉上置于无样式文本之上，然后在无样式文本上设置 text-stroke 以将其缩小一点。