如何在<input>中放入<span>？

Question

这不是重复的.虽然我基本上在寻找与其他帖子相同的结果,但我想以不同的方式去做.他们正在使用背景图片,我想用一个<span>.

我正在尝试创建一个文本框,以便当用户输入文本框时,右侧会显示"X".但是,当盒子里没有文字时,我不希望"X"出现,就像现在一样.

我尝试将"X"设为白色,并在滑动时将其转换为颜色,但是当你将mousedown拖到它上面时仍然可以选择.

我想我需要将它放在文本框中(不知何故),然后将其滑动到右侧并使用隐藏它overflow: hidden.我也尝试过这样做,但我无法随心所欲.

http://jsfiddle.net/qgy8Ly5L/16/

本<span>应该是"落后"的白色背景时,它没有显示.中期过渡应如下所示:

这可能在CSS中,如果是这样,我该怎么办？

Answer 1

将输入和跨度包裹在容器内,将此容器定位为相对容器,将跨度定位为绝对容器.你现在可以用跨度做任何你喜欢的事情.

function checkInput(text) {

  if (text) {
    $("#clearBtn1").addClass("show");
  } else {
    $("#clearBtn1").removeClass("show");
  }

}

.text-container {
  display: inline-block;
  position: relative;
  overflow: hidden;
}
.clearBtn {
  position: absolute;
  top: 0;
  right: -15px;
  transition: right 0.2s;
}
.show {
  right: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text-container">
  <input type="text" onkeyup="checkInput(this.value)" />
  <span id="clearBtn1" class="clearBtn">X</span>
</div>