CSS可以幫助我們實現很多華麗的效果，其中一個就是在搜索框下方顯示搜索歷史記錄。這種效果不但能夠提供快速搜索功能，同時還能提高用戶體驗。下面就讓我們一步步來實現吧！

這里我們先定義了搜索框和搜索歷史記錄的樣式。搜索框樣式包括搜索框本身以及搜索按鈕，可以根據自己的需要進行調整。搜索歷史記錄樣式包括整個列表和每一項的樣式。這里我們使用了絕對定位和z-index來控制搜索歷史記錄的顯示層級，而且默認為隱藏狀態，待搜索框獲得焦點后再顯示出來。

搜索記錄1
搜索記錄2
搜索記錄3

接著我們在HTML中添加了搜索框和搜索歷史記錄的代碼。需要注意的是，搜索歷史記錄應該放在搜索框下面，且初始狀態為隱藏。

到這里，我們的搜索框就完成了。如有需要，我們還可以加入更多的功能，比如點擊搜索歷史記錄自動填充搜索框、點擊搜索歷史記錄搜索等等。希望這篇文章對您有所幫助！