style(element-ui): 区分 el-select 选中值与占位符颜色

- 修复 Element Plus el-select 组件选中值与占位符使用同一节点导致无法区分颜色的问题
- 只有未选值或已展开无搜索时节点带 .is-transparent,用此类排除选中颜色样式应用
- 更新
This commit is contained in:
2026-09-03 17:03:08 +08:00
parent a0a3d53927
commit 23b23dc8e5
2 changed files with 18 additions and 4 deletions
+7
View File
@@ -15,3 +15,10 @@
- 根因:`__dispatch-shipping-form __route-address-row` 网格地址列为 `minmax(280px, 1fr)`,各列最小宽度合计 1030px,弹窗不够宽时 grid 不换行直接溢出。 - 根因:`__dispatch-shipping-form __route-address-row` 网格地址列为 `minmax(280px, 1fr)`,各列最小宽度合计 1030px,弹窗不够宽时 grid 不换行直接溢出。
- 修复:地址列改 `minmax(0, 1fr)`(宽屏仍 1fr 拉伸,窄窗自动收窄,总最小宽降到 750px)。 - 修复:地址列改 `minmax(0, 1fr)`(宽屏仍 1fr 拉伸,窄窗自动收窄,总最小宽降到 750px)。
- 备注:基础规则 `__route-address-row`(13750 行,运单独立表单页等在用,7 列含 40px 按钮列)仍是 minmax(280px,1fr),同样窄窗有溢出风险,暂未动(用户未反馈该页问题)。 - 备注:基础规则 `__route-address-row`(13750 行,运单独立表单页等在用,7 列含 40px 按钮列)仍是 minmax(280px,1fr),同样窄窗有溢出风险,暂未动(用户未反馈该页问题)。
## el-select 选中值 / 占位符颜色区分(全局)
- 需求:已选值 #606266,未选值保持 placeholder 灰 #909399
- 根因:Element Plus 的选中值文本与占位符**共用同一节点** `<div class="el-select__selected-item el-select__placeholder [is-transparent]">`,仅靠 `.el-select__selected-item` 无法区分,导致未选态也被染成选中色。
- 区分标志:只有「未选值」或「已展开但无搜索输入」时才带 `.is-transparent`
- 修复(`src/styles/element-ui.scss`):选中规则改为 `.el-select__wrapper:not(.is-disabled) .el-select__selected-item:not(.is-transparent)`;多选 tag 文字另加 `.el-select__tags-text` 规则(tag 自身 color 优先级更高,父级规则盖不到)。
- 经验:以后写任何「区分 el-select 有值/无值」的 CSS,一律用 `:not(.is-transparent)`
+11 -4
View File
@@ -1117,11 +1117,18 @@
color: #909399 !important; color: #909399 !important;
} }
// 已选中:选中文本用主文字色 #333333,与占位符明显区分。 // 已选中:选中文本用主文字色 #606266,与占位符明显区分。
// 注意Element Plus 选中值节点同时带 el-select__selected-item 与 el-select__placeholder 两个类 // 关键Element Plus 的「选中值文本」与「占位符」共用同一个节点
// 而上面占位符规则用了 !important,故此处必须同样 !important 才能胜出(本规则 specificity 更高)。 // <div class="el-select__selected-item el-select__placeholder [is-transparent]">
// 只有未选值(或已展开但无搜索输入)时才会带 .is-transparent。
// 因此这里必须排除 .is-transparent,否则未选值的占位符也会被染成选中色,与占位符灰无法区分。
// 仅作用于非禁用态,禁用态保留 Element Plus 的禁用灰(--el-select-disabled-color),避免被覆盖。 // 仅作用于非禁用态,禁用态保留 Element Plus 的禁用灰(--el-select-disabled-color),避免被覆盖。
.el-select__wrapper:not(.is-disabled) .el-select__selected-item { .el-select__wrapper:not(.is-disabled) .el-select__selected-item:not(.is-transparent) {
color: #606266 !important;
}
// 多选:选中项渲染为 el-tag,文字色由 tag 自身控制,上面规则覆盖不到,单独处理。
.el-select__wrapper:not(.is-disabled) .el-select__tags-text {
color: #606266 !important; color: #606266 !important;
} }