fix: 修复暗色主题下下拉菜单白色背景闪烁问题

- 添加 dark-select-dropdown 自定义类
- 修复鼠标移出后下拉菜单出现白色背景的问题
- 强制覆盖所有可能的白色背景样式

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-06 16:49:18 +08:00
parent b2bc9988a9
commit 20015dbd2a
2 changed files with 47 additions and 2 deletions

View File

@@ -19,6 +19,27 @@ body {
@apply bg-dark-900 text-gray-100 font-sans;
}
/* 自定义下拉菜单类 */
.dark-select-dropdown {
background-color: #1a1c25 !important;
border: 1px solid #2a2c36 !important;
}
.dark-select-dropdown .el-select-dropdown__item {
color: #ffffff !important;
background-color: transparent !important;
}
.dark-select-dropdown .el-select-dropdown__item:hover,
.dark-select-dropdown .el-select-dropdown__item.hover {
background-color: #1a1c25 !important;
}
.dark-select-dropdown .el-select-dropdown__item.is-selected {
color: #ff9500 !important;
background-color: transparent !important;
}
/* Element Plus 暗色主题 */
html.dark {
--el-bg-color: #171922;
@@ -129,6 +150,30 @@ html.dark .el-select-dropdown {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
/* 修复鼠标移出后出现白色背景的问题 */
html.dark .el-select-dropdown__list {
background-color: #1a1c25 !important;
}
html.dark .el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after {
background-color: transparent;
}
html.dark .el-popper.is-light .el-popper__arrow::before,
html.dark .el-select-dropdown__arrow {
background-color: #1a1c25 !important;
}
/* 强制覆盖所有可能的白色背景 */
html.dark .el-select-dropdown__item.hover,
html.dark .el-select-dropdown__item:hover {
background-color: #1a1c25 !important;
}
html.dark .el-select-dropdown.el-popper[x-placement^="bottom"] .el-select-dropdown__item {
background-color: #1a1c25 !important;
}
html.dark .el-select-dropdown__item {
color: #ffffff !important;
padding: 8px 12px;