html怎么制作漂亮的搜索框

在网页设计中，搜索框是一个非常重要的元素，它可以帮助用户快速找到他们需要的信息，一个漂亮的搜索框不仅可以提高用户体验，还可以提升网站的整体美观度，如何用HTML制作一个漂亮的搜索框呢？本文将为您详细介绍。

1、使用HTML和CSS创建基本搜索框

我们需要使用HTML创建一个基本的搜索框，这里我们使用<input>标签来创建一个文本输入框，并为其添加type="search"属性以表示这是一个搜索框，我们还需要为搜索框添加一个placeholder属性，以便在用户未输入任何内容时显示提示信息。

<form action="/search" method="get">
  <input type="search" name="q" placeholder="请输入关键词">
  <input type="submit" value="搜索">
</form>

接下来，我们可以使用CSS对搜索框进行美化，我们可以设置搜索框的宽度、高度和边框样式，我们可以为搜索框添加一些阴影效果，使其看起来更加立体，我们可以为搜索按钮设置背景颜色、边框样式和文字样式。

/* 搜索框样式 */
input[type="search"] {
  width: 300px;
  height: 32px;
  padding: 4px;
  border: 1px solid ccc;
  border-radius: 24px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* 搜索按钮样式 */
input[type="submit"] {
  background-color: 4CAF50;
  color: white;
  border: none;
  border-radius: 24px;
  padding: 6px 12px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin-left: 10px;
}

2、使用JavaScript实现搜索框自动完成功能

为了提高用户体验，我们可以为搜索框添加自动完成功能，这里我们使用JavaScript来实现这个功能，我们需要获取所有可能的搜索建议，并将它们存储在一个数组中，我们需要监听搜索框的输入事件，当用户输入内容时，我们将根据输入的内容筛选出相关的搜索建议，并将它们显示在搜索框下方。

// 获取所有可能的搜索建议
const suggestions = ["苹果", "香蕉", "橙子", "葡萄", "柠檬"];
// 获取搜索框元素
const searchInput = document.querySelector("input[type='search']");
const suggestionList = document.querySelector(".suggestion-list");
// 监听搜索框的输入事件
searchInput.addEventListener("input", () => {
  // 根据输入的内容筛选出相关的搜索建议
  const inputValue = searchInput.value.trim().toLowerCase();
  const filteredSuggestions = suggestions.filter((suggestion) =>
    suggestion.toLowerCase().startsWith(inputValue)
  );
  // 清空搜索建议列表并显示新的搜索建议
  suggestionList.innerHTML = "";
  filteredSuggestions.forEach((suggestion) => {
    const listItem = document.createElement("li");
    listItem.textContent = suggestion;
    listItem.addEventListener("click", () => {
      searchInput.value = suggestion;
      suggestionList.style.display = "none";
    });
    suggestionList.appendChild(listItem);
    suggestionList.style.display = "block";
  });
});

3、使用CSS实现搜索框动画效果

为了使搜索框看起来更加生动有趣，我们可以为其添加一些动画效果，这里我们使用CSS的@keyframes规则来定义一个名为slideIn的动画，该动画将在用户将鼠标悬停在搜索框上时触发，我们还需要为搜索建议列表添加一个名为fadeIn的动画，该动画将在用户点击某个搜索建议时触发。

/* slideIn动画 */
@keyframes slideIn {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}
/* fadeIn动画 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

接下来，我们需要将这些动画应用到相应的元素上，我们需要为搜索框添加一个hover伪类选择器，以便在用户将鼠标悬停在其上时触发slideIn动画，我们需要为搜索建议列表添加一个animation属性，以便在用户点击某个搜索建议时触发fadeIn动画。

/* 应用slideIn动画 */
input[type="search"]:hover + .suggestion-list {
  animation: slideIn ease-in-out forwards; /* forwards表示动画结束后保持最后一帧的状态 */
}