css如何做下拉选择框 |js内嵌 css

下面大家将介绍如何使用CSS来制作下拉选择框。

/* 下拉框容器 */
.select-container {
position: relative; /* 相对定位 */
width: 200px;
height: 30px;
background: #fff;
border: 1px solid #ccc;
}
/* 下拉框触发按钮 */
.select-container .select-trigger {
position: absolute; /* 绝对定位 */
top: 0;
right: 0;
width: 30px;
height: 100%;
background: url(icon.png) no-repeat center center; /* 自定义下拉箭头图片 */
}
/* 下拉框列表 */
.select-container .select-list {
display: none; /* 默认隐藏 */
position: absolute;
top: 30px;
left: 0;
width: 100%;
background: #fff;
border: 1px solid #ccc;
z-index: 1; /* 设置层级 */
}
/* 下拉框列表选项 */
.select-container .select-list li {
padding: 5px;
cursor: pointer;
}
/* 下拉框列表选项悬停效果 */
.select-container .select-list li:hover {
background: #f1f1f1;
}

通过以上代码，大家可以制作一个简单的下拉选择框。

当用户点击下拉框触发按钮时，显示下拉框列表；当用户点击下拉框列表选项时，触发指定的事件。

希望以上介绍对您有所帮助。