Question

我有一个输入搜索框，其类型为“搜索”，我在搜索框中使用了字体超赞的图标，效果很好。我想做的是将鼠标悬停在输入框上，我希望字体真棒图标消失，以及当用户开始在输入框中输入内容时，我希望图标的可见性被隐藏。我设法单击鼠标以摆脱该图标，但是当我单击cancel（X）时，我希望字体真棒图标再次变得可见。如果可能的话，我想在没有JavaScript的情况下做到这一点，如果不可能的话，JavaScript是第二种解决方案。这是我的代码段。

我能够通过图标隐藏带有图标的类，并通过onclick来隐藏CSS类。

<div class="searchuser">
    <form action="" class="contr-form">
        <input type="search" name="q" placeholder="Search" style="border- 
            radius:6px"  onclick="gone.style.visibility='hidden';"><br>
               <i class="fa fa-search usersearch" id="gone"></i>
     </form> 
  </div>   


        .searchuser input::placeholder{
              color:gray;
              font-family:'Open Sans';
               font-size:12px;
           padding: 0px 0px 0px 10px;

          }

   .usersearch 
     float: right;
     margin-right: 6px;
     margin-top: -20px;
     position: relative;
    z-index: 2;
      color: gray; 
      }

  I would like the ability when I click the X for cancel that the font 
  awesome icon to reappear. I'm using Angular 7. So tying to avoid HS if 
  possible.

预先感谢您 PDH

执行搜索框取消或重置时是否可以调用课程

0 个答案: