[分享]css3搜索框有下拉列表

CSS3搜索框是一种比较常用的Web设计元素之一，可以通过CSS3技术实现比传统搜索框更加美观、交互体验更加丰富的效果。其中，搜索框带有下拉列表的效果尤为实用。 HTML结构： 搜索结果1 搜索结...

CSS3搜索框是一种比较常用的Web设计元素之一，可以通过CSS3技术实现比传统搜索框更加美观、交互体验更加丰富的效果。其中，搜索框带有下拉列表的效果尤为实用。

HTML结构：

<form class="search-form">
   <input type="text" class="search-text" placeholder="请输入关键词" autocomplete="off" />
   <ul class="search-result">
      <li>搜索结果1</li>
      <li>搜索结果2</li>
      <li>搜索结果3</li>
   </ul>
</form>

CSS样式：

.search-form {
   position: relative;
}

.search-text {
   width: 200px;
   height: 30px;
   border: 1px solid #ccc;
   border-radius: 5px;
   outline: none;
   padding-left: 10px;
}

.search-result {
   display: none;
   position: absolute;
   left: 0;
   top: 30px;
   width: 200px;
   padding: 0;
   margin: 0;
   border: 1px solid #ccc;
   border-radius: 5px;
   background-color: #fff;
   z-index: 1;
}

.search-result li {
   list-style: none;
   padding: 5px 10px;
   cursor: pointer;
}

.search-text:focus + .search-result {
   display: block;
}

搜索框的HTML结构比较简单，使用form标签包裹，搜索框和下拉列表分别使用input和ul标签实现。CSS样式中，将搜索框设置为position: relative，可以使下拉列表使用position: absolute相对其进行定位，从而实现下拉效果。

默认情况下，下拉列表使用display: none隐藏，只有在搜索框获得焦点时才显示。在CSS样式中，使用:focus伪类实现搜索框获得焦点时下拉列表显示的效果。同时，给下拉列表li标签设置cursor: pointer，以便用户可以点击选择搜索结果。

综上所述，通过CSS3技术实现搜索框带有下拉列表的效果非常简单，只需要在HTML结构和CSS样式中进行简单的设置，即可实现更加美观、实用的搜索框效果。