在CSS中搜索内容时如何隐藏搜索图标

Question

我想在用户搜索内容时隐藏search图标

我甚至想隐藏...图标，并清除图标，使其保持原样x

问题显示如下：

注意：我想在search icon和Search text之间保持相同的差距

input[type="search"]{
  width:400px;
}

.more-symbol-3dots { 
    transform: translateY(-158%);
    color: #676460;
    right: 31px;
    font-size: 29px;
    position: relative;
    top: -2px;
  }
 .more-symbol-3dots::before{
     content:"...";
  }
 .fa-search.s-section{
    position: absolute;
    left: 13px;
    transform: translateY(11%);
    top: 10px;
  }
 .fa-search.s-section::after{
       content: "Search";
        position: absolute;
        left: 30px;
        color: #8c8585;
  }

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<div class="wrapper" style="position:relative;">
    <input type="search">
 <i class="fa fa-search s-section" aria-hidden="true"></i>
 <i class="more-symbol-3dots" aria-hidden="true"></i>
</div>  

这是codepen： https://codepen.io/eabangalore/pen/Lgrqxo

Answer 1

可以使用以下方法隐藏搜索图标

[type="search"]:focus ~ .fa-search {display:none}

隐藏更多符号可以使用

[type="search"]:focus ~ .more-symbol-3dots {display:none}

input[type="search"] {
  width: 400px;
}

.more-symbol-3dots {
  transform: translateY(-158%);
  color: #676460;
  right: 31px;
  font-size: 29px;
  position: relative;
  top: -2px;
}

.more-symbol-3dots::before {
  content: "...";
}

.fa-search.s-section {
  position: absolute;
  left: 13px;
  transform: translateY(11%);
  top: 10px;
}

.fa-search.s-section::after {
  content: "Search";
  position: absolute;
  left: 30px;
  color: #8c8585;
}

[type="search"]:focus~.fa-search,
[type="search"]:valid~.fa-search {
  display: none
}

[type="search"]:focus~.more-symbol-3dots,
[type="search"]:valid~.more-symbol-3dots {
  display: none
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<div class="wrapper" style="position:relative;">
  <input type="search" required>
  <i class="fa fa-search s-section" aria-hidden="true"></i>
  <i class="more-symbol-3dots" aria-hidden="true"></i>
</div>

Answer 2

可以在单击时更改样式，如下所示：

 <input type="search" onclick="this.className='fa'" "/>
 <i class="fa fa-search s-section" aria-hidden="true"
     onclick="this.className='fa'" ></i>