输入后使图标出现答案

【问题标题】：Make icon appear after input输入后使图标出现
【发布时间】：2017-12-14 13:43:08
【问题描述】：

我的应用程序中有这个搜索栏，我想修改它：

现在“X”图标从一开始就可见，即使在输入完成之前它什么也不做，所以我想让它在用户开始输入文本后出现。

图标是我单独添加和设置样式的 SVG。

我真的不知道我该怎么做，我认为这很容易，我可以使用类似“::after”的东西，但似乎这对于输入字段来说是不可能的。

Ps.：我是 CSS 的绝对初学者，所以请多多包涵。

【问题讨论】：

到目前为止你的代码是什么？你使用任何布局框架吗？
@ino 我不确定如何回答这个问题，它是一个应用程序，我只是负责修改样式和可用性。开发人员对大多数东西以及一些 Material UI 组件（我现在正试图“杀死”）做出反应。
在输入文本时在 JS 中设置 display:none; 将 display 的 CSS 属性设置为 block 之类的其他内容。

标签： css input

【解决方案1】：

实现您的要求的最佳方法是通过检查input 何时在JS 中不为空来使用不同的classes 和shows/hides 图标。

如果你想在不使用JS的情况下实现你可以在input被聚焦时定位相邻的button元素并添加::before伪元素并对其进行样式化。

input:focus+button:before {
    content: "X";
    position: absolute;
    left: 0;
    color: red;
}

【讨论】：

【解决方案2】：

使用 CSS 是不可能的。您必须使用 Javascript。

Javascript

// set the id of the x button to x-button
// set the id of the input field to input
var x_button = document.getElementById("x-button");
var input = document.getElementById("search-input");
input.oninput = function(){
if(this.value) x_button.classList.add("visible");
else x_button.classList.remove("visible");
}

CSS

.x-button { display:none;}
.visible {display:block;}

【讨论】：

【解决方案3】：

如果你想只使用 css 是可能的。

#Search{
font-size:22px;
color:green;
background-image:url('images/search.jpg');
background-repeat:no-repeat;
background-position:center;outline:0;
}

#Search::-webkit-search-cancel-button{
    position:relative;
    right:20px;    
}

&lt;input id="Search" name="Search" type="search" placeholder="Search" /&gt;

【讨论】：