下拉列表是web開發中常用的控件之一，它可以讓用戶從一系列選項中選擇一個選項。當用戶選擇一個選項后，我們需要通過JavaScript來獲取該選項的值，并根據該值來進行一些操作。

// HTML代碼
<select id="myList">
<option value="option1">選項一</option>
<option value="option2">選項二</option>
<option value="option3">選項三</option>
</select>
// JavaScript代碼
var myList = document.getElementById("myList");
myList.addEventListener("change", function() {
var selectedValue = this.value;
// 根據選項值進行相關操作
});

在上面的代碼中，我們使用了addEventListener()來監聽下拉列表的選中事件。當用戶選中某個選項后，change事件就會觸發，我們就可以通過this.value來獲取選中選項的值了。

除了獲取選項的值外，使用CSS來改變下拉列表的樣式也是一個非常常見的需求。下面是一些例子：

/* 去掉默認下拉箭頭 */
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: url("custom-arrow.png") no-repeat 95% center;
padding-right: 20px;
}
/* 改變選項的背景色 */
select option:checked {
background-color: #ff0000;
}
/* 改變選項的字體顏色 */
select option:checked {
color: #ffffff;
}

上面的CSS代碼中，第一個例子使用了appearance屬性來去掉默認的下拉箭頭，并使用background屬性來添加自定義的箭頭圖片。第二個例子使用:checked偽類來選擇當前被選中的選項，并改變其背景顏色。第三個例子同樣使用:checked偽類來選擇當前被選中的選項，并改變其字體顏色。

使用CSS來改變下拉列表的樣式可以讓我們更好地控制其外觀，提高用戶的體驗。