如何建立像 Facebook 一样的搜索框

Question

请问如何制作一个搜索框，在点击搜索图标时应该为搜索框 Facebook 搜索栏打开另一个页面。提前致谢。

Answer 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>

如何建立像 Facebook 一样的搜索框

How build search box like Facebook

html

javascript

css

search

这里是结果：