下拉框按鈕在網頁開發中非常常見。利用CSS樣式的設置，我們可以創建出漂亮的下拉框按鈕，下面我們一步步來看怎樣做到。 首先，在HTML文件中加入一個select標簽，例如：

<select>
<option value="value1">選項1</option>
<option value="value2">選項2</option>
<option value="value3">選項3</option>
</select>

接下來，我們給select標簽加上CSS樣式，使其變為下拉框按鈕的樣式：

p {
font-family: Arial, sans-serif;
}
select {
font-size: 16px;
padding: 10px;
border: none;
outline: none;
background-color: #eee;
background-image: linear-gradient(to top, #fff, #ccc);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
select::-ms-expand {
display: none;
}
select:hover {
cursor: pointer;
background-color: #ddd;
}
select option {
font-size: 14px;
}

解釋一下這段CSS樣式的代碼： p標簽中設置字體樣式，接下來是select標簽的樣式設置，其中： - font-size設置字體大小； - padding設置內邊距； - border設置邊框，這里選擇了無邊框； - outline設置輪廓，這里選擇了無輪廓； - background-color設置背景顏色； - background-image設置背景圖片，這里選擇了漸變色； - -webkit-appearance、-moz-appearance和appearance設置下拉框按鈕的樣式，這里選擇了默認的按鈕樣式； - select::-ms-expand設置在IE中不顯示下拉箭頭； - select:hover設置鼠標滑過時的背景顏色； - select option設置下拉框中的選項的字體大小。 有了如上的CSS樣式設置，我們就為HTML中的select標簽添加了一個漂亮的下拉框按鈕。