仅隐藏输入字段的内容

Question

我的输入字段有一个跨度，当您在输入字段中键入时，它会更新其内容。

即使我将跨度完美地放在输入文本上，您仍然可以看到文本更加粗体，字母更粗。

（字段nr.1-有span，nr.2-没有）

我试图隐藏整个输入字段，但随后光标也消失了，没有它就打字非常混乱。

有没有办法可以只隐藏输入字段的文本？

Answer 1

只需将输入文本设置为不可见，将光标设置为黑色：

  #box {
      color: transparent;
      caret-color: black;
    }

<input type="text" id="box" value="some_sample_text">

所以这样文本是不可见的，但光标显示出来。你的跨度覆盖，这应该是你想要的。但请不要忘记您的输入字段必须具有相同的大小和字体大小，否则插入符号位置错误。

Answer 2

好的，过了一段时间，这就是我的目标：

＆＃13;

＆＃13;

input{
  position: absolute;
    top: 25px;
  left: 25px;
}
#bottom {
  z-index: 1;
}
#top {
  z-index: 3;
}

＆＃13;

<div class="txt">
<input type="text" id="bottom" value="bottom_box">
<input type="text" id="top" value="top_box">
</div><br>

＆＃13;

＆＃13;

＆＃13;