下拉框是網頁開發中經常用到的組件，而設置下拉框的小三角也是很重要的一部分。下面我們來看看如何使用CSS來設置下拉框小三角。

/* 設置select元素的樣式 */
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* 隱藏默認的下拉箭頭 */
background-image: url('data:image/svg+xml;utf8,');
/* 使用SVG圖片作為下拉箭頭 */
background-repeat: no-repeat;
background-position: right center;
/* 設置下拉箭頭位置 */
padding-right: 20px;
/* 防止箭頭被遮擋 */
border: none;
/* 清除默認邊框 */
font-family: inherit;
font-size: inherit;
/* 繼承父元素的字體和字號 */
cursor: pointer;
/* 光標形態為手型 */
}
/* 鼠標懸停時的樣式 */
select:hover {
background-color: #e8e8e8;
/* 懸停時高亮顯示 */
}
/* 獲得焦點時的樣式 */
select:focus {
outline: none;
/* 去掉默認的輪廓線 */
box-shadow: 0 0 2px 1px #9ecaed;
/* 添加一個淺藍色的陰影效果 */
}

代碼中我們使用了CSS3的appearance屬性來隱藏下拉框默認的箭頭，同時使用SVG圖片作為代替，利用background-image屬性來設置圖片地址，background-position屬性來控制箭頭的位置，padding-right屬性來避免箭頭被遮擋。此外，我們還對鼠標懸停和獲得焦點時的樣式進行了設置，使下拉框更加美觀。