From df8fd22fa7819d0a0812c134e4685ebd8e9581a9 Mon Sep 17 00:00:00 2001
From: Faran Javed <faran1997@outlook.com>
Date: Thu, 8 Jan 2026 19:59:35 +0500
Subject: [PATCH] add select component selected styles

---
 .../comps/comps/selectInputComp/cascaderComp.tsx |  3 +++
 .../selectInputComp/selectCompConstants.tsx      |  6 ++++++
 .../src/comps/controls/styleControlConstants.tsx | 16 +++++++++++++++-
 client/packages/lowcoder/src/i18n/locales/en.ts  |  1 +
 4 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx
index b96f8eb3e..662cd9d98 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx
@@ -32,6 +32,9 @@ const DropdownRenderStyle = styled.div<{ $childrenInputFieldStyle: ChildrenMulti
     text-decoration: ${props => props.$childrenInputFieldStyle?.textDecoration};
     color: ${props => props.$childrenInputFieldStyle?.text};
     }
+    .ant-cascader-menu-item-active:not(.ant-cascader-menu-item-disabled) {
+      background-color: ${props => props.$childrenInputFieldStyle?.activeBackground ? `${props.$childrenInputFieldStyle.activeBackground}22` : 'rgb(242, 247, 252)'};
+    }
 `
 
 let CascaderBasicComp = (function () {
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx
index a75b9f05c..08d7690fd 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx
@@ -217,6 +217,12 @@ export const DropdownStyled = styled.div<{ $style: ChildrenMultiSelectStyleType
     min-width: 14px;
     margin-right: 0;
   }
+  .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
+    background-color: ${props => props.$style?.selectBackground ? `${props.$style.selectBackground}` : 'transparent'};
+  }
+  .ant-select-item-option-active:not(.ant-select-item-option-disabled) {
+    background-color: ${props => props.$style?.activeBackground ? `${props.$style.activeBackground}` : 'transparent'};
+  }
 `;
 
 const Wrapper = styled.span`
diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
index 01587643d..c7410749e 100644
--- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
+++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
@@ -1555,7 +1555,21 @@ export const MultiSelectStyle = [
 
 export const ChildrenMultiSelectStyle = [
   ...STYLING_FIELDS_SEQUENCE,
-  getBackground()
+  getBackground(),
+  {
+    name: "activeBackground",
+    label: trans("style.activeBackground"),
+    depTheme: "primary",
+    depType: DEP_TYPE.SELF,
+    transformer: handleLightenColor,
+  },
+  {
+    name: "selectBackground",
+    label: trans("style.selectBackground"),
+    depTheme: "primary",
+    depType: DEP_TYPE.SELF,
+    transformer: toSelf,
+  }
 ] as const;
 
 export const TabContainerStyle = [
diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
index 8cbc26404..b3234e2ef 100644
--- a/client/packages/lowcoder/src/i18n/locales/en.ts
+++ b/client/packages/lowcoder/src/i18n/locales/en.ts
@@ -592,6 +592,7 @@ export const en = {
     "siderBackgroundImagePosition": "Sider Background Image Position",
     "siderBackgroundImageOrigin": "Sider Background Image Origin",
     "activeBackground": "Active Background Color",
+    "selectBackground": "Selected Background Color",
     "labelBackground": "Label Background Color",
     "gradientBackground": "Gradient Background Color",
     "direction": "Direction",