最近在做Web项目的时候，遇到了需要模拟select下拉框的需求，但是由于种种原因，我不能使用jQuery或者其他JavaScript库，于是我参考了许多资料，最终通过纯CSS来实现了这个功能。

.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;
}

以上是实现纯 CSS 模拟 select 的核心代码，首先我们需要在 HTML 里创建一个 select 元素，并将其隐藏，然后使用一个带有 .select-container 类名的 div 元素包裹它。接着创建一个带有 .select-option 类名的对应下拉框元素，并将其放在 .select-container 元素后面，通过绝对定位让其在 select 元素下方并与之重合，最后使用 CSS 将 option 元素设为块级元素，让它们可以垂直排布，并在选中时触发 select-option 元素的显示。

使用这种纯 CSS 的方法模拟 select 的主要优点是非常轻量，且足以应对大多数情况下的需求。但是需要注意的是，它的兼容性并不十分完美，有些浏览器可能存在一些 minor 的 bug，因此需要根据具体情况来决定是否使用。