如何在 <input> 中放置 <span>？ [复制]答案

【问题标题】：How can I put a <span> inside of an <input>? [duplicate]如何在 <input> 中放置 <span>？ [复制]
【发布时间】：2015-01-13 20:16:26
【问题描述】：

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

我正在尝试制作一个文本框，以便当用户输入时，右侧会显示一个“X”。但是，我不希望在框中没有文本时出现“X”，就像现在一样。

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

我想我需要将它放在文本框内（不知何故），然后将其向右滑动并使用overflow: hidden 隐藏它。我也尝试过这样做，但我无法做到。

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

<span> 在未显示时应位于白色背景“后面”。中间过渡应如下所示：

_{（来源：googledrive.com）}

这在 CSS 中是否可行，如果可以，我该怎么做？

【问题讨论】：

标签： css input hide css-transitions

【解决方案1】：

将您的输入和跨度都包装在一个容器中，将此容器定位为相对，将跨度定位为绝对。您现在可以使用 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>

【讨论】：

非常感谢@AntoineCombes。这为我节省了很多。 . .

【解决方案2】：

默认隐藏 X 并在需要时使用 show 类

.clearBtn {
    position: relative;
    left: 0;
    transition: left 0.3s;
    display: none;
}
.show {
    display: inline;
}

function checkInput(text) {

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

}

http://jsfiddle.net/qgy8Ly5L/18/

【讨论】：

【解决方案3】：

看看这个更新的小提琴：

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

.clearBtn {
    position: relative;
    left: 0;
    transition: left 0.3s;
    visibility: hidden;
}

.show {
    left: -18px;
    visibility: visible;
}

http://jsfiddle.net/qgy8Ly5L/19/

通过使用visibility，您可以将元素保留在 DOM 中。当它重新出现时，这将使事情变得顺利。请注意“真实”if 语句的使用。

【讨论】：

非常感谢您的回答，也许我的问题还不够清楚。请检查我添加到问题中的图片。