css 模拟 select选择

您好，感谢您的提问。如果您想要使用CSS模拟下拉列表选择框，可以使用以下代码：

HTML代码：

<div class="custom-select">
  <div class="select-selected">Select an option</div>
  <div class="select-items select-hide">
    <div>Option 1</div>
    <div>Option 2</div>
    <div>Option 3</div>
  </div>
</div>

CSS代码：

/* 隐藏下拉列表 */
.select-hide {
  display: none;
}
/* 自定义下拉列表样式 */
.custom-select {
  position: relative;
  display: inline-block;
  width: 200px;
}
/* 自定义下拉列表选择框样式 */
.select-selected {
  background-color: #eee;
  padding: 5px 10px;
  border: 1px solid #ccc;
  cursor: pointer;
}
/* 自定义下拉列表选项样式 */
.select-items div {
  padding: 5px 10px;
  cursor: pointer;
}
/* 自定义下拉列表选项:hover样式 */
.select-items div:hover {
  background-color: #f1f1f1;
}
/* 显示下拉列表 */
.select-items {
  position: absolute;
  z-index: 999;
  top: 100%;
  left: 0;
  right: 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border-top: none;
  max-height: 200px;
  overflow-y: auto;
}

在上面的代码中，我们首先创建了一个包含下拉列表的父元素，然后在该元素中创建了两个子元素：一个用于显示选中的选项，另一个用于显示选项列表。我们使用CSS样式对这些元素进行了自定义，使它们看起来像是下拉列表选择框。

当用户点击选择框时，我们使用JavaScript代码动态添加或删除“select-hide”类名来显示或隐藏选项列表。当用户选择一个选项后，我们使用JavaScript将选中的选项文本赋值给选择框元素。

这样，就可以使用CSS模拟下拉列表选择框了。