css制作搜索框输入提示样式-css教程-PHP中文网

css制作搜索框输入提示样式

P粉602998670

发布： 2025-11-05 04:23:20

原创

418人浏览过

答案：通过HTML结构、CSS样式和JavaScript交互实现搜索框输入提示效果。.search-container设置相对定位，.search-input定义输入框样式，.suggestions使用绝对定位浮于上方，圆角边框阴影提升视觉效果，JS监听输入动态过滤数据并展示匹配项，点击或键盘操作可选中，提升可用性。

css制作搜索框输入提示样式

制作一个美观实用的搜索框输入提示（Autocomplete Suggestions）效果，可以通过 HTML + CSS 实现基础样式，再配合 JavaScript 动态控制显示内容。以下是一个简洁、可复用的 CSS 样式方案。

1. 基础 HTML 结构

使用一个容器包裹输入框和提示列表：

<div class="search-container">
  <input type="text" class="search-input" placeholder="搜索...">
  <ul class="suggestions">
    <li>苹果</li>
    <li>香蕉</li>
    <li>橙子</li>
  </ul>
</div>

登录后复制

2. 核心 CSS 样式

为输入框和提示列表设置样式，确保提示层浮在上方、有圆角、阴影和悬停效果：

立即学习“前端免费学习笔记（深入）”；

.search-container {
  position: relative;
  width: 300px;
}
<p>.search-input {
width: 100%;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 6px;
outline: none;
}</p><p>.suggestions {
position: absolute;
top: 100%;
left: 0;
right: 0;
margin: 0;
padding: 0;
list-style: none;
background: #fff;
border: 1px solid #ddd;
border-top: none;
border-radius: 0 0 6px 6px;
max-height: 200px;
overflow-y: auto;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
z-index: 1000;
display: none; /<em> 默认隐藏 </em>/
}</p><p>.suggestions.show {
display: block; /<em> 显示时激活 </em>/
}</p><p>.suggestions li {
padding: 10px;
cursor: pointer;
transition: background-color 0.2s;
}</p><p>.suggestions li:hover,
.suggestions li.selected {
background-color: #f0f0f0;
}</p>

登录后复制

3. 显示/隐藏提示的简单 JS 控制

虽然重点是 CSS，但简单 JS 可让提示出现更自然：

Angel工作室企业网站管理系统1.2

Angel工作室企业网站管理系统全DIV+CSS模板，中英文显示，防注入sql关键字过滤，多浏览器适应，完美兼容IE6-IE8,火狐，谷歌等符合标准的浏览器，模板样式集中在一个CSS样式中，内容与样式完全分离，方便网站设计人员开发模板与管理。系统较为安全，以设计防注入，敏感字符屏蔽。新闻，产品，单页独立关键字设计，提高搜索引擎收录。内置IIS测试，双击打启动预览网站　　 Angel工作室企业网站

查看详情

立即学习“前端免费学习笔记（深入）”；

const input = document.querySelector('.search-input');
const suggestions = document.querySelector('.suggestions');
<p>// 模拟数据
const data = ['苹果', '香蕉', '橙子', '葡萄', '草莓'];</p><p>input.addEventListener('input', function() {
const value = this.value.trim().toLowerCase();
suggestions.innerHTML = '';</p><p>if (value) {
const filtered = data.filter(item => item.toLowerCase().includes(value));
filtered.forEach(item => {
const li = document.createElement('li');
li.textContent = item;
suggestions.appendChild(li);
});
suggestions.classList.add('show');
} else {
suggestions.classList.remove('show');
}
});</p><p>// 点击选项填充输入框
suggestions.addEventListener('click', function(e) {
if (e.target.tagName === 'LI') {
input.value = e.target.textContent;
suggestions.classList.remove('show');
}
});</p>

登录后复制