下拉框是網頁設計中經常使用的一個組件，它可以讓用戶方便地選擇不同的選項。而一個好看的下拉框可以為整個頁面增加一份美感，讓用戶更愿意停留在網站上。下面我們來介紹幾個好看的 CSS 下拉框代碼。 第一個例子是一個簡潔而美觀的下拉框，它使用了圓角邊框和漸變背景色，給人以舒適的感覺。代碼如下：

<select name="select" class="dropdown">
<option value="">請選擇</option>
<option value="option1">選項一</option>
<option value="option2">選項二</option>
<option value="option3">選項三</option>
</select>
.dropdown {
width: 200px;
padding: 8px;
font-size: 16px;
border-radius: 5px;
background-color: #fff;
background-image: linear-gradient(to bottom, #f9f9f9, #e9e9e9);
border: 1px solid #ccc;
box-shadow: 0px 1px 2px rgba(0,0,0,0.1);
}
.dropdown:hover, .dropdown:focus {
border-color: #999;
}

代碼中，我們設置下拉框的寬度和字體大小，并使用圓角邊框、漸變背景和陰影效果來美化下拉框。同時，我們還給下拉框設置了懸停和聚焦時的樣式。 第二個例子是一個類似于自動完成輸入的下拉框，它可以根據用戶輸入的關鍵字篩選選項。代碼如下：

<div class="autocomplete">
<input type="text" name="autocomplete" placeholder="請輸入關鍵字">
<ul class="dropdown">
<li>選項一</li>
<li>選項二</li>
<li>選項三</li>
</ul>
</div>
.autocomplete {
position: relative;
display: inline-block;
width: 200px;
}
.dropdown {
position: absolute;
top: 100%;
left: 0;
z-index: 1;
min-width: 200px;
margin-top: 4px;
padding: 8px;
border-radius: 5px;
background-color: #fff;
border: 1px solid #ccc;
box-shadow: 0px 1px 2px rgba(0,0,0,0.1);
}
.dropdown li {
cursor: pointer;
padding: 4px;
}
.dropdown li:hover {
background-color: #e9e9e9;
}
input:focus + .dropdown {
display: block;
}

代碼中，我們將下拉框放在了一個輸入框的下方，并使用了絕對定位來實現彈出效果。同時，我們還為下拉框的選項添加了懸停樣式，并通過 CSS 選擇器實現了輸入框聚焦時下拉框的顯示和隱藏。 以上就是幾個好看的 CSS 下拉框代碼，它們不僅美觀，而且易于實現和使用，希望對你有所幫助。