CSS美化輸入框下拉框是很常見的UI設計需求。這篇文章將提供一個使用CSS來美化輸入框下拉框的例子。

.input-wrapper {
position: relative;
}
.input-wrapper select {
appearance: none; /* 隱藏默認下拉樣式 */
-webkit-appearance: none;
-moz-appearance: none;
width: 100%;
height: 32px;
padding: 6px 12px;
border: 1px solid #ced4da;
border-radius: 4px;
outline: none;
font-size: 14px;
font-weight: 400;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
/* 下拉箭頭樣式 */
.input-wrapper select:after {
position: absolute;
top: 50%;
right: 12px;
transform: translateY(-50%);
display: inline-block;
width: 0;
height: 0;
border-top: 5px solid #aaa;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
content: "";
}
/* 鼠標懸浮樣式 */
.input-wrapper select:hover {
border-color: #6c757d;
}
/* 獲得焦點樣式 */
.input-wrapper select:focus {
border-color: #4d90fe;
box-shadow: 0 0 0 0.2rem rgba(38,143,255,.25);
}

以上CSS代碼是用來美化輸入框下拉框的樣式。代碼中首先定義了一個.input-wrapper類，用來定義下拉框的容器樣式，并設置了select元素的樣式。這些樣式包括寬度、高度、內邊距、邊框、邊框半徑、字體大小、字體加粗度、行高、字體顏色、背景顏色和過渡效果。

接著，我們定義了一個偽類選擇器 ":after"來創建我們的下拉箭頭，通過設置該元素的寬度、高度和邊框樣式來創建箭頭形狀，并將其放置在輸入框右邊。可以看到，我們使用了絕對定位和一些CSS變換來實現這個效果。

最后，我們定義了:hover和:focus偽類選擇器來定義懸停和獲得焦點時的樣式，當用戶懸停或點擊輸入框時，邊框顏色和陰影將會變化。

如此，我們就成功地用CSS美化了輸入框下拉框的樣式，這樣用戶體驗將更加優秀。