我该怎么做才能使我的搜索栏在聚焦时不会折叠？

Question

当我的搜索栏本身获得焦点时，我似乎无法让我的搜索栏折叠起来，但我的鼠标没有悬停在它上面。如何使我的搜索栏在获得焦点时不会折叠，即使我的鼠标指针没有悬停在搜索栏上？

这是 CSS 和 HTML:

.search-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #474646;
  height: 40px;
  border-radius: 50px;
  padding: 10px;
}

.search-box .search-btn {
  color: #bb14bb;
  float: right;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #474646;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: .4s;
}

.search-box .search-text {
  border: none;
  background: none;
  outline: none;
  float: left;
  padding: 0;
  color: white;
  font-size: 16px;
  transition: .4s;
  line-height: 40px;
  width: 0px;
}

.search-box:hover>.search-text {
  width: 240px;
  padding: 0 6px;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
<div class="search-box">
  <input class="search-text" type="text" name="box" placeholder="Search here...">
  <a class="search-btn" href="#">
    <i class="fas fa-search"></i>
  </a>
</div>

Answer 1

您需要激活焦点@ class .search-text，我修改了您的代码并将其添加到您给定的代码中，当您将鼠标悬停在远离框的位置时，它不会松散大小除非你点击退出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .search-box{
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
   background: #474646;
   height: 40px;
   border-radius: 50px;
   padding: 10px;
}
.search-box .search-btn{
   margin-top: -10px;
   color: #bb14bb;
   float: right;
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background: #474646;
   display: flex;
   justify-content: center;
   align-items: center;
   transition: .4s;
}
.search-box .search-text{
 margin-top: -10px;
 border:none;
 background: none;
 outline: none;
 float: left;
 padding: 0;
 color: white;
 font-size: 16px;
 transition: .4s;
 line-height: 40px;
 width: 0px;
}

.search-box:hover > .search-text{
    width: 240px;
    padding: 0 6px;
}
/*this will keep your text box active as far as its in focus, even the mouse is hovered away.*/
.search-text:focus{
    width: 240px;
    padding: 0 6px;
}
</style>
<body>
    <div class="search-box">
        <input class="search-text" type="text" name="box" placeholder="Search here...">
          <a class="search-btn" href="#">
             <i class="fas fa-search"></i>
          </a>
      </div>

</body>
</html>

Answer 2

您可以使用 Javascript 通过在 .search-text 元素上设置 mouseLeave() eventListner 来实现此目的..

这将防止搜索栏在悬停后关闭并包含值..

这里是代码，

if(search.value){
   search.style.width = "240px";
   search.style.padding = "0 6px";
}

将检查搜索输入字段中是否存在任何值，如果存在，它将保持与悬停时相同的宽度。

工作片段如下，

const search = document.querySelector('.search-text');

search.addEventListener('mouseleave', () => {
    if(search.value){
        search.style.width = "240px";
        search.style.padding = "0 6px";
    }
})

.search-box{
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
   background: #474646;
   height: 40px;
   border-radius: 50px;
   padding: 10px;
}
.search-box .search-btn{
   margin-top: -10px;
   color: #bb14bb;
   float: right;
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background: #474646;
   display: flex;
   justify-content: center;
   align-items: center;
   transition: .4s;
}
.search-box .search-text{
 margin-top: -10px;
 border:none;
 background: none;
 outline: none;
 float: left;
 padding: 0;
 color: white;
 font-size: 16px;
 transition: .4s;
 line-height: 40px;
 width: 0px;
}

.search-box:hover > .search-text{
    width: 240px;
    padding: 0 6px;
}

<div class="search-box">
   <input class="search-text" type="text" name="box" placeholder="Search here...">
     <a class="search-btn" href="#">
        <i class="fas fa-search"></i>
     </a>
 </div>

注：你也可以添加CSS喜欢，

.search-text:focus{
    width: 240px;
    padding: 0 6px;
}

但是当您在搜索框外单击时，即使其中有一个值，这也会关闭搜索框，所以如果您以 JS 方式处理它会更好..

我该怎么做才能使我的搜索栏在聚焦时不会折叠？

How do I make it so that my search bar does not collapse when it's on focus?

html

javascript

css

font-awesome-5