下拉框是我們經常用到的頁面元素之一，它使我們可以在一組選項中進行選擇。如果你想要制作一個漂亮的下拉框，使用CSS來實現可以讓你自定義樣式，并增強視覺效果。 下面是一段CSS下拉框模板的代碼：

/* 下拉框容器 */
.dropdown {
position: relative;
display: inline-block;
}
/* 下拉框按鈕 */
.dropdown button {
padding: 10px;
background-color: #555;
color: #fff;
border: none;
cursor: pointer;
}
/* 下拉框選項 */
.dropdown-content {
position: absolute;
display: none;
z-index: 1;
min-width: 160px;
background-color: #f1f1f1;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
/* 選項懸停效果 */
.dropdown-content a:hover {
background-color: #ddd;
}
/* 顯示下拉框選項 */
.show {
display: block;
}

代碼中，我們先定義了一個容器（`.dropdown`），并在其中定義了一個按鈕（`button`）和一個下拉框選項（`.dropdown-content`）。`.show`類是用于指示當下拉框被激活時，需要顯示下拉框選項。 我們可以添加JavaScript來為下拉框增加交互性。例如，當用戶點擊按鈕時，我們可以按需切換`.show`類的狀態以顯示或隱藏下拉框選項。如下面這段代碼所示：

/* JavaScript代碼 */
document.querySelector(".dropdown button").addEventListener("click", function() {
document.querySelector(".dropdown-content").classList.toggle("show");
});

這段代碼會為下拉框中的按鈕添加一個點擊事件，使它在被點擊時切換`.show`類的狀態。 最后，我們將上述CSS和JavaScript代碼組合在一起，即可創建一個完整的CSS下拉框。 使用CSS來制作下拉框，可以讓我們輕松自定義外觀，并且避免使用大量JavaScript代碼。希望這個模板可以幫助你創建一個自己的下拉框。