[分享]css制作搜索框和搜索列表

CSS是一种用于网页设计的语言，通过CSS语言可以为网页添加丰富的样式和特效。在我们的网站中，搜索框和搜索列表也是必不可少的元素。下面，我们介绍一下如何使用CSS制作搜索框和搜索列表。首先，我们需要创...

CSS是一种用于网页设计的语言，通过CSS语言可以为网页添加丰富的样式和特效。在我们的网站中，搜索框和搜索列表也是必不可少的元素。下面，我们介绍一下如何使用CSS制作搜索框和搜索列表。

首先，我们需要创建一个搜索框。创建一个表单元素，并为其添加一个class属性：

<form class="search-form">
    <input type="text" name="search" placeholder="请输入搜索内容">
    <button type="submit">搜索</button>
</form>

在CSS文件中，我们可以为它添加以下样式：

.search-form {
    position: relative;  /* 定位相对，用于搜索列表的定位 */
}
.search-form input[type="text"] {
    width: 200px; /* 设置输入框的宽度 */
    padding: 10px; /* 设置输入框的内边距 */
    border: 1px solid #ccc; /* 设置输入框的边框 */
    font-size: 16px; /* 设置输入框中的字体大小 */
}
.search-form button[type="submit"] {
    padding: 10px 15px; /* 设置按钮的内边距 */
    border: none; /* 去除按钮的边框 */
    background-color: #333; /* 设置按钮的背景颜色 */
    color: #fff; /* 设置按钮的字体颜色为白色 */
} 

这样，我们就完成了搜索框的制作。

接下来，我们需要创建搜索列表。搜索列表可以使用HTML的

• 和

• 标签来创建：

  <ul class="search-list">
      <li>搜索结果1</li>
      <li>搜索结果2</li>
  </ul>

  在CSS文件中，我们可以为它添加以下样式：

  .search-list {
      display: none; /* 初始状态下，搜索列表应该是隐藏的 */
      position: absolute; /* 定位绝对，根据输入框进行定位 */
      top: 40px; /* 离输入框的距离 */
      left: 0; /* 离屏幕左侧的距离 */
      width: 200px; /* 设置搜索列表的宽度和输入框的宽度一致 */
      background-color: #fff; /* 设置搜索列表的背景颜色为白色 */
      border: 1px solid #ccc; /* 设置搜索列表的边框 */
      z-index: 999; /* 设置搜索列表的层级，保证其始终在最上层 */
  }
  .search-list li {
      padding: 10px; /* 设置搜索结果的内边距 */
      font-size: 16px; /* 设置搜索结果的字体大小 */
  }

  然后，我们需要为搜索框添加一些交互效果，让搜索列表在输入框中输入文字时自动显示和隐藏：

  .search-form input[type="text"]:focus + .search-list {
      display: block; /* 当输入框获取焦点时显示搜索列表 */
  }
  .search-form input[type="text"]:focus + .search-list:hover,
  .search-form input[type="text"]:hover + .search-list {
      display: block; /* 当鼠标移动到搜索列表上时保持显示状态 */
  }

  这样，我们的搜索框和搜索列表就制作完成啦！