带下拉搜索框样式
时间: 2023-07-01 08:20:25 浏览: 44
以下是一个简单的带下拉搜索框样式示例,供您参考:
HTML 代码:
```
<div class="search-box">
<input type="text" placeholder="搜索...">
<ul class="search-results">
<li>搜索结果 1</li>
<li>搜索结果 2</li>
<li>搜索结果 3</li>
</ul>
</div>
```
CSS 代码:
```
.search-box {
position: relative;
display: inline-block;
}
.search-box input[type="text"] {
width: 200px;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
}
.search-box .search-results {
position: absolute;
top: 100%;
left: 0;
z-index: 999;
width: 100%;
max-height: 200px;
overflow-y: auto;
background-color: #fff;
border: 1px solid #ccc;
border-top: none;
border-radius: 0 0 4px 4px;
padding: 0;
margin: 0;
list-style: none;
}
.search-box .search-results li {
padding: 8px;
cursor: pointer;
}
.search-box .search-results li:hover {
background-color: #f2f2f2;
}
```
说明:
- `position: relative;` 使 `.search-box` 成为一个相对定位容器,以便在下拉菜单中使用绝对定位。
- `input[type="text"]` 样式设置输入框。
- `.search-results` 样式设置下拉菜单。
- `position: absolute;`、`top: 100%;`、`left: 0;` 使下拉菜单相对于 `.search-box` 的底部左对齐。
- `z-index: 999;` 控制下拉菜单的层叠顺序,确保它在页面上的其他内容之上。
- `max-height: 200px;`、`overflow-y: auto;` 控制下拉菜单的最大高度并启用垂直滚动。
- `border: 1px solid #ccc;` 控制边框样式。
- `list-style: none;` 去掉下拉菜单的默认列表样式。
- `.search-results li:hover` 设置鼠标悬停时下拉菜单项的背景色。