时间戳

首页 > 解决方案 > 如何让我的输入框轮廓消失？

html - 如何让我的输入框轮廓消失？

问题描述

当我将鼠标悬停在按钮上时，它会显示输入框（如图 1 所示）我的代码是这样编写的：

.search-btn{
    position: relative;
    top: 30%;
    left: 30%;
    transform: translate(-50%,-50%);
    transition: all 1s;
    width: 50px;
    height: 50px;
    background: white;
    box-sizing: border-box;
    border-radius: 25px;
    border: 4px solid white;
    padding: 5px;
}



.fa{
    box-sizing: border-box;
    padding: 10px;
    width: 42.5px;
    height: 42.5px;
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 50%;
    color: black;
    text-align: center;
    font-size: 1.2em;
    transition: all 1s;
}

.search-btn:hover{
    width: 200px;
    cursor: pointer;
}

.search-btn:hover .search-txt {
  display: inline-block;
 }

 .search-txt {
  position: absolute;
    top: 0;
    left: 0;
    width: 100%;;
    height: 42.5px;
    line-height: 50px;
    display: none;
    font-size: 1em;
    border-radius: 20px;
    padding: 0 20px;
 }
 
.search-btn:hover .fa{
    background: #941313;
    color: white;
}

我可以摆脱边框的唯一方法是如果我删除 search-btn:hover .search-txt 中的 {display: inline-block} 并添加 {border:none} 等。但是这样就完全摆脱了输入框本身，我不能在里面写任何东西（如图2所示）

我究竟做错了什么？？提前感谢您的帮助。

顺便说一句，我的html是这样写的（都在header里面）

<nav>
        <ul>
          <li><a href="about.html">About</a></li>
          <li><a href="stories.html">Stories</a></li>
          <li>
            <a href="resources.html">Resources and Campaigns</a>
          </li>
          <li><a href="contact.html">Contact</a></li>
           
  <li><div class="search-btn">
    <input class="search-txt" type="search" name="" placeholder="Type to search">
    <i class="fa fa-search"></i>
   </div>
  </li>      
   

</ul>
</nav>

标签： htmlcssbuttonsearchinput

解决方案

您需要使用border:none;Replace your .search-txt css with this

.search-txt {
position: absolute;
top: 0;
left: 0;
width: 100%;;
height: 42.5px;
line-height: 50px;
display: none;
font-size: 1em;
border: none;
padding: 0 20px;
}

推荐阅读