Css 当输入处于活动状态/焦点时删除表单标签

当输入处于活动/聚焦状态时，尝试删除图标。问题是：下班后不工作。当我点击输入时，标签仍然可见

试用内容：无；但那没用

搜索标签{ 位置：相对位置； 字体大小：正常； } 搜索标签：之前{ 内容：\f002； 字体系列：Fontsome； 字体大小：115%； 位置：绝对位置； 颜色：dddddd； 顶部：5px； 左：8px；

---

} jQuery解决方案如下所示：

$("input").focus(function(){
    $("span#your_icon").hide();
}).blur(function(){
    $("span#your_icon").show();
});

document.getElementById("myInput").addEventListener("focus", function(){
    document.getElementById("#your_icon").style.display = 'none';
});

document.getElementById("myInput").addEventListener("blur", function(){
    document.getElementById("#your_icon").style.display = 'inline';
});

JS解决方案如下所示：

$("input").focus(function(){
    $("span#your_icon").hide();
}).blur(function(){
    $("span#your_icon").show();
});

document.getElementById("myInput").addEventListener("focus", function(){
    document.getElementById("#your_icon").style.display = 'none';
});

document.getElementById("myInput").addEventListener("blur", function(){
    document.getElementById("#your_icon").style.display = 'inline';
});

---

您可以使用背景图像来执行类似的操作，而不是使用标签

.input-search {
    background:url('http://www.aljanaedu.com/Limitless/images/icons/14x14/search.png') no-repeat left 10px center;
 }
.input-search:focus {
    background-image:none;
}

---

使用小提琴实际上取决于您的标记，以及您是否有修改它的自由和/或能力

是的，标记可以更改：仅CSS解决方案 如果标签是同级标签并且出现在输入之后，则可以根据输入元素本身的状态切换其显示状态，例如：

.输入行{ 位置：相对位置； } .输入行标签{ 位置：绝对位置； 左：0； } .input row label:：before{ 过渡：1s； /*只是为了展示切换是如何工作的*/ } .input row label.icon1:：before{ 内容：“icon1”； } .input row label.icon2:：before{ 内容：“icon2”； } .输入行输入{ 填充：0 2rem0； } .输入行输入：焦点+标签：：之前， .输入行输入：活动+标签：：之前{ 不透明度：0；/*以直观地隐藏标签的伪元素*/ 指针事件：无；/*以防止任何基于光标的交互*/ }

---

我想你需要JS来完成这项工作，看看这里：你不能。由：after或：before创建的内容不是DOM的一部分，因此无法选择或修改。我认为仅使用css是不可能的。您会接受JS/jQuery解决方案吗？好的，那么我如何使用JavaScript来实现这一点？好的，您真正需要的是一些css应用到的HTML：。它不在你的代码片段中。也许你可以添加它，这样每个人都可以玩？