在網頁開發(fā)中，搜索框是一個非常常見的元素，而下拉選擇框也是一個很便利的表單元素。如果將兩者結合起來，在輸入框下方添加下拉選擇框，就可以實現(xiàn)更加強大的搜索功能。

要實現(xiàn)這樣的效果，可以使用CSS的偽元素和屬性選擇器。首先，需要一個包含輸入框和下拉選擇框的父元素，并為其設置定位。然后，使用絕對定位來將下拉選擇框放置在輸入框下方。最后，使用CSS的偽元素和屬性選擇器來美化下拉選擇框。

.search-wrapper {
position: relative;
}
.search-input {
height: 30px;
padding: 5px;
}
.search-select {
position: absolute;
top: 40px;
left: 0;
width: 100%;
background-color: #ffffff;
border: 1px solid #cccccc;
border-top: none;
display: none;
}
.search-wrapper:hover .search-select {
display: block;
}
.search-select option {
padding: 5px;
border-bottom: 1px solid #cccccc;
}
.search-select option:last-child {
border-bottom: none;
}

在這段代碼中，.search-wrapper是包含輸入框和下拉選擇框的父元素，在:hover狀態(tài)下會顯示下拉選擇框。.search-input是輸入框的樣式，.search-select是下拉選擇框的樣式。

下拉選擇框的樣式設置了一個白色的背景色和灰色的邊框，使用了display:none將其默認隱藏。只有在搜索框被hover時才會顯示。在下拉選擇框的option選擇器中，設置了padding和邊框，使其更加美觀。

通過使用CSS的偽元素和屬性選擇器，可以輕松實現(xiàn)搜索框下拉選擇的效果，為用戶提供更加方便的搜索功能。