enhance(select): enhance selected state style for options

arco-design · Jan 2, 2024 · 92d6f9a · 92d6f9a
1 parent 315518e
commit 92d6f9a
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 0 deletions.
diff --git a/packages/web-vue/components/select/option.vue b/packages/web-vue/components/select/option.vue
@@ -207,6 +207,7 @@ export default defineComponent({
       prefixCls,
       {
         [`${prefixCls}-disabled`]: props.disabled,
+        [`${prefixCls}-selected`]: isSelected.value,
         [`${prefixCls}-active`]: isActive.value,
         [`${prefixCls}-multiple`]: selectCtx?.multiple,
       },

diff --git a/packages/web-vue/components/select/style/index.less b/packages/web-vue/components/select/style/index.less
@@ -64,6 +64,13 @@
       justify-content: space-between;
     }
 
+    // selected
+    &-selected {
+      color: @select-popup-option-color-text_selected;
+      font-weight: @select-popup-option-font-weight_selected;
+      background-color: @select-popup-option-color-bg_selected;
+    }
+
     // hover
     &-active,
     &:not(&-disabled):hover {