在微信小程序中，下拉框（dropdown）是非常常用的一個組件，而掌握下拉框的CSS樣式，可以讓我們的小程序更加美觀。下面我們就來看一下如何使用CSS為微信小程序下拉框添加樣式。

// 創建下拉框
<view class="dropdown">
<text class="dropdown-title">請選擇</text>
<view class="dropdown-content">
<view class="dropdown-item">北京</view>
<view class="dropdown-item">上海</view>
<view class="dropdown-item">廣州</view>
<view class="dropdown-item">深圳</view>
</view>
</view>
// 下拉框樣式
.dropdown {
position: relative;
display: inline-block;
width: 200px;
}
.dropdown .dropdown-title {
display: block;
padding: 10px;
color: #333;
background-color: #f8f8f8;
border: 1px solid #ddd;
cursor: pointer;
}
.dropdown .dropdown-content {
position: absolute;
top: 100%;
left: 0;
z-index: 1;
display: none;
width: 100%;
max-height: 200px;
overflow-y: auto;
border: 1px solid #ddd;
background-color: #f8f8f8;
}
.dropdown .dropdown-content.show {
display: block;
}
.dropdown .dropdown-item {
display: block;
padding: 10px;
color: #333;
cursor: pointer;
}
.dropdown .dropdown-item:hover {
background-color: #f0f0f0;
}

代碼解釋：

• position: relative; 表示下拉框相對定位
• display: inline-block; 表示下拉框以行內塊級元素排列
• width: 200px; 表示下拉框的寬度為200px
• .dropdown-title 表示下拉框標題
• display: block; 表示下拉框標題以塊級元素排列
• padding: 10px; 表示下拉框標題的內邊距為10px
• ...其他樣式設置均可參考注釋

在上述代碼中，我們為下拉框綁定了一些事件，如點擊下拉框標題時顯示下拉框內容。讀者可以結合實際項目需求進行樣式修改。