在网页设计中，搜索框是一个非常重要的元素，它可以帮助用户快速找到他们需要的信息，一个漂亮的搜索框不仅可以提高用户体验，还可以提升网站的整体美观度，如何用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表示动画结束后保持最后一帧的状态 */
}
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/337619.html
微信扫一扫 