CSS是網頁設計中必不可少的一部分，其中輸入框的樣式特別重要。其中，輸入框的下拉顯示更是提供了交互性和可視性，下面我們就來談談如何實現。

/* 定義基本樣式 */
.input-box {
position: relative;
display: inline-block;
}
/* 定義下拉圖標 */
.input-box::after {
content: "";
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #ccc;
}
/* 定義下拉框樣式 */
.select-box {
display: none;
position: absolute;
z-index: 1;
top: 100%;
left: 0;
background-color: #fff;
width: 100%;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
max-height: 200px;
overflow-y: scroll;
}
/* 顯示下拉框 */
.input-box:focus .select-box {
display: block;
}
/* 下拉框選項樣式 */
.select-box li {
padding: 10px;
border-bottom: 1px solid #ccc;
cursor: pointer;
}
/* 選中效果 */
.select-box li:hover,
.select-box li.active {
background-color: #f2f2f2;
}

上述代碼中，我們使用偽類和相對/絕對定位實現了下拉圖標的顯示。并定義了select-box類的樣式，使用display:none將其隱藏。當輸入框獲取焦點時，給父元素input-box添加focus類，將下拉框的顯示設置為block。

最后，我們還定義了下拉框選項的樣式。這里使用了hover和active兩個類，分別實現鼠標懸停和選中后的效果。