css搜索框提示 |css gif

/* HTML代码 */
<div class="search-box">
<input type="text" placeholder="请输入搜索内容">
<div class="search-tips">
<p>提示1</p>
<p>提示2</p>
<p>提示3</p>
</div>
</div>
/* CSS代码 */
.search-box {
position: relative;
}
.search-tips {
display: none;
position: absolute;
top: 40px;
left: 0;
width: 100%;
background-color: #fff;
box-shadow: 0px 1px 1px rgba(0,0,0,0.2);
border: 1px solid #ddd;
}
.search-box input[type="text"]:focus + .search-tips {
display: block;
}

首先，大家需要在搜索框的外层添加一个父元素，并将其设置为相对定位，这样在后面设置绝对定位的提示框时，就可以相对于这个父元素进行定位。

接着，在搜索框后面添加一个包含多个提示的div元素，将其隐藏起来。并且在样式中设置这个提示框的绝对定位、背景色、阴影等属性。

然后，在CSS中通过相邻兄弟选择器（+）来选择搜索框获取焦点时的提示框，将其显示出来。

最后，在HTML中使用placeholder属性来设置搜索框的提示语。这样就可以使用CSS来实现搜索框提示了。