style(element-ui): 区分 el-select 选中值与占位符颜色
- 修复 Element Plus el-select 组件选中值与占位符使用同一节点导致无法区分颜色的问题 - 只有未选值或已展开无搜索时节点带 .is-transparent,用此类排除选中颜色样式应用 - 更新
This commit is contained in:
@@ -1117,11 +1117,18 @@
|
||||
color: #909399 !important;
|
||||
}
|
||||
|
||||
// 已选中:选中文本用主文字色 #333333,与占位符明显区分。
|
||||
// 注意:Element Plus 选中值节点同时带 el-select__selected-item 与 el-select__placeholder 两个类,
|
||||
// 而上面占位符规则用了 !important,故此处必须同样 !important 才能胜出(本规则 specificity 更高)。
|
||||
// 已选中:选中文本用主文字色 #606266,与占位符明显区分。
|
||||
// 关键:Element Plus 的「选中值文本」与「占位符」共用同一个节点,
|
||||
// <div class="el-select__selected-item el-select__placeholder [is-transparent]">
|
||||
// 只有未选值(或已展开但无搜索输入)时才会带 .is-transparent。
|
||||
// 因此这里必须排除 .is-transparent,否则未选值的占位符也会被染成选中色,与占位符灰无法区分。
|
||||
// 仅作用于非禁用态,禁用态保留 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;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user