最近在做Web項目的時候，遇到了需要模擬select下拉框的需求，但是由于種種原因，我不能使用jQuery或者其他JavaScript庫，于是我參考了許多資料，最終通過純CSS來實現(xiàn)了這個功能。

.select-container {
position: relative;
display: inline-block;
}
.select-container select {
display: none;
}
.select-container .select-option {
display: block;
position: absolute;
top: 100%;
left: 0;
z-index: 1;
width: 100%;
background-color: white;
border: 1px solid gray;
margin-top: 5px;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.4);
max-height: 120px;
overflow-y: scroll;
}
.select-container .select-option >option {
display: block;
padding: 5px;
cursor: pointer;
}
.select-container select:focus ~ .select-option {
display: block;
}

以上是實現(xiàn)純 CSS 模擬 select 的核心代碼，首先我們需要在 HTML 里創(chuàng)建一個 select 元素，并將其隱藏，然后使用一個帶有 .select-container 類名的 div 元素包裹它。接著創(chuàng)建一個帶有 .select-option 類名的對應(yīng)下拉框元素，并將其放在 .select-container 元素后面，通過絕對定位讓其在 select 元素下方并與之重合，最后使用 CSS 將 option 元素設(shè)為塊級元素，讓它們可以垂直排布，并在選中時觸發(fā) select-option 元素的顯示。

使用這種純 CSS 的方法模擬 select 的主要優(yōu)點是非常輕量，且足以應(yīng)對大多數(shù)情況下的需求。但是需要注意的是，它的兼容性并不十分完美，有些瀏覽器可能存在一些 minor 的 bug，因此需要根據(jù)具體情況來決定是否使用。