输入后出现制作图标

Question

我的应用程序中有我想要修改的搜索栏：

现在，“X”-Icon从一开始就可以看到，即使它在输入完成之前什么都不做，所以我希望在用户开始输入文本之后显示它。

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

我真的不知道我怎么做到这一点，我认为它很简单，我可以使用类似“:: after”之类的东西，但似乎这对输入字段来说是不可能的。

Ps。：我是CSS的绝对初学者所以请怜悯。

Answer 1

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

Answer 2

实现您的要求的最佳方法是通过classes中shows/hides不为空时检查input JS图标{/ 1}}。

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

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

Answer 3

如果您只想使用css，那就有可能。

＆＃13;

＆＃13;

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

＆＃13;

<input id="Search" name="Search" type="search" placeholder="Search" />

＆＃13;

＆＃13;

＆＃13;