css - 如何将 <span> 放入 <input> 中？

标签 css input hide css-transitions

<分区>

这不是重复的。虽然我基本上是在寻找与 the other post 相同的结果，我想以不同的方式去做。他们正在使用背景图片，而我想使用 <span> .

我正在尝试创建一个文本框，以便当用户在其中键入内容时，右侧会显示一个“X”。但是，我不希望在框中没有文本时显示“X”，就像现在这样。

我尝试将“X”设为白色，并让它在滑动时转换颜色，但当您将鼠标向下拖动到它上面时您仍然可以选择。

我想我需要将它放在文本框内(以某种方式)，然后将它向右滑动并使用 overflow: hidden 隐藏它。 .我也确实尝试过这样做，但是我什么也做不了。

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

<span>当它不显示时应该在白色背景的“后面”。中间过渡应该是这样的:

_{(来源:googledrive.com)}

这在 CSS 中可行吗？如果可行，我该怎么做？

最佳答案

将您的输入和跨度都包装在一个容器中，将此容器定位为相对的，将跨度定位为绝对的。您现在可以随心所欲地使用 span。

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>

关于css - 如何将 <span> 放入 <input> 中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26963878/