Css 我怎样才能把a<；span>；内部<；输入>；？

这不是重复的。虽然我基本上是在寻找与之相同的结果，但我想用一种不同的方式去做。他们使用的是背景图像，我想使用

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

我试着把“X”变成白色，当它滑动时让它转换颜色，但是当你把鼠标向下拖动到它上面时，你仍然可以选择它

我想我需要把它放在文本框中（不知何故），然后向右滑动并使用

overflow:hidden

隐藏它。我也尝试过这样做，但我没有成功

不显示时，

应位于白色背景的“后面”。中间过渡应如下所示：

（来源：）

---

这在CSS中可能吗？如果可能的话，我该怎么做？

默认情况下隐藏X，并在需要时使用show类

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

JS

---

查看此更新的小提琴：

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;
}

---

通过使用

可见性

可以将元素保留在DOM中。当它再次出现时，这将保持平稳。请注意使用“truthy”if语句。

将输入和跨度都包装在一个容器中，将此容器定位为相对，将跨度定位为绝对。现在，您可以使用span执行任何您喜欢的操作

功能检查输入（文本）{
如果（文本）{
$（“#clearBtn1”）.addClass（“show”）；
}否则{
$（“#clearBtn1”）.removeClass（“show”）；
}
}

.text容器{
显示：内联块；
位置：相对位置；
溢出：隐藏；
}
.clearBtn{
位置：绝对位置；
排名：0；
右图：-15px；
过渡：右0.2s；
}
.表演{
右：5px；
}

X

非常感谢您的回答，也许我的问题还不够清楚。请查看我添加到问题中的图片。非常感谢，@AntoineCombes。那帮我省了很多钱。

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;
}