【问题标题】：How build search box like Facebook如何构建像 Facebook 这样的搜索框
【发布时间】：2022-01-25 16:10:35
【问题描述】：

请如何使一个搜索框在单击搜索图标时应为搜索框 Facebook 搜索栏打开另一个页面。提前致谢。

【问题讨论】：

SO 用于询问特定的编程问题。就目前而言，您的问题太广泛了。您需要提供一些示例代码来演示您所做的工作以及您的确切问题。
我尝试使用定位、悬停、CSS 网格等创建您的想法的迷你演示

【解决方案1】：

我尝试仅使用 HTML 和 CSS 来创建它

这里是结果：

body {
  margin: 0;
}

nav {
  background-color: rgba(0, 0, 255, 0.172);
  border-bottom: 1px solid blue;
  padding: 0.5em 0;
  display: grid;
  place-items: center;
}

nav input[type="text"] {
  font-size: 1.5em;
  border-radius: 2em;
  border: none;
  color: white;
  width: 1.5em;
  transition-duration: 0.5s;
}

nav input[type="text"]:hover,
nav input[type="text"]:focus {
  width: calc(90vw - 2em);
  color: rgb(0, 51, 255);
  border-radius: 0.2em;
  transition-duration: 1s;
  padding: 0 2em 0 0;
}

input[type="text"]:hover~svg,
input[type="text"]:focus~svg {
  right: 10px;
}

nav #content {
  display: grid;
  grid-auto-flow: column;
  place-items: center;
}

#content svg {
  width: 1.5em;
  height: 100%;
  position: absolute;
  pointer-events: none;
  top: 0;
  z-index: 1;
}

#content {
  position: relative;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <nav>
    <div id="content">
      <input type="text">
      <!--search icon-->
      <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" preserveaspectratio="xMidYMid meet" focusable="false" class="style-scope yt-icon"><g class="style-scope yt-icon"><path d="M20.87,20.17l-5.59-5.59C16.35,13.35,17,11.75,17,10c0-3.87-3.13-7-7-7s-7,3.13-7,7s3.13,7,7,7c1.75,0,3.35-0.65,4.58-1.71 l5.59,5.59L20.87,20.17z M10,16c-3.31,0-6-2.69-6-6s2.69-6,6-6s6,2.69,6,6S13.31,16,10,16z" class="style-scope yt-icon"></path></g></svg>
    </div>
  </nav>
</body>

</html>

【讨论】：