diff --git a/client/packages/lowcoder-design/src/components/Input.tsx b/client/packages/lowcoder-design/src/components/Input.tsx
index 7fb9ced59..91f95fab9 100644
--- a/client/packages/lowcoder-design/src/components/Input.tsx
+++ b/client/packages/lowcoder-design/src/components/Input.tsx
@@ -8,7 +8,6 @@ import { INPUT_DEFAULT_ONCHANGE_DEBOUNCE } from "constants/perf";
 
 export const StyledInput = styled(AntdInput)`
   width: ${(props) => (props.width ? props.width : "100%")};
-  background: #fdfdfd;
   border: 1px solid ${BorderColor};
   border-radius: ${BorderRadius};
   padding-left: 12px;
diff --git a/client/packages/lowcoder-design/src/components/Search.tsx b/client/packages/lowcoder-design/src/components/Search.tsx
index 05249e3c1..68d1719ac 100644
--- a/client/packages/lowcoder-design/src/components/Search.tsx
+++ b/client/packages/lowcoder-design/src/components/Search.tsx
@@ -13,11 +13,21 @@ const SearchInput = styled(Input)`
   font-size: 13px;
   user-select: none;
   overflow: hidden;
+  background-color: #fdfdfd;
+  color: #000;
 
   &:focus {
     outline: none;
     box-shadow: 0 0 0 3px #daecfc;
   }
+  &:hover {
+    background-color: #fdfdfd;
+    color: #000;
+  }
+  &:focus-within {
+    background-color: #fdfdfd;
+    color: #000;
+  }
 `;
 const SearchDiv = styled.div<{ error?: boolean }>`
   height: 32px;
diff --git a/client/packages/lowcoder-design/src/components/Section.tsx b/client/packages/lowcoder-design/src/components/Section.tsx
index 64799789f..f0d2d14d8 100644
--- a/client/packages/lowcoder-design/src/components/Section.tsx
+++ b/client/packages/lowcoder-design/src/components/Section.tsx
@@ -147,5 +147,7 @@ export const sectionNames = {
   style: trans("prop.style"),
   labelStyle:trans("prop.labelStyle"),
   data: trans("prop.data"),
-  meetings : trans("prop.meetings"), // added by Falk Wolsky
+  meetings: trans("prop.meetings"), // added by Falk Wolsky
+  field: trans("prop.field"),
+  inputFieldStyle:trans("prop.inputFieldStyle")
 };
diff --git a/client/packages/lowcoder-design/src/components/customSelect.tsx b/client/packages/lowcoder-design/src/components/customSelect.tsx
index 7f7ab99fb..f6540aaad 100644
--- a/client/packages/lowcoder-design/src/components/customSelect.tsx
+++ b/client/packages/lowcoder-design/src/components/customSelect.tsx
@@ -21,6 +21,7 @@ const SelectWrapper = styled.div<{ $border?: boolean }>`
     height: 100%;
     align-items: center;
     margin-right: 8px;
+    background-color: #fff;
 
     .ant-select-selection-item {
       display: flex;
diff --git a/client/packages/lowcoder-design/src/i18n/design/locales/en.ts b/client/packages/lowcoder-design/src/i18n/design/locales/en.ts
index 3e667abe2..b2bd85625 100644
--- a/client/packages/lowcoder-design/src/i18n/design/locales/en.ts
+++ b/client/packages/lowcoder-design/src/i18n/design/locales/en.ts
@@ -27,6 +27,8 @@ export const en = {
     style: "Style",
     meetings: "Meeting Settings",
     data: "Data",
+    field: 'Field',
+    inputFieldStyle:'Input Field Style'
   },
   passwordInput: {
     label: "Password:",
diff --git a/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx b/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx
index ab1a992fa..ae6fb9457 100644
--- a/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx
@@ -3,6 +3,7 @@ import { Input, Section, sectionNames } from "lowcoder-design";
 import { BoolControl } from "comps/controls/boolControl";
 import { styleControl } from "comps/controls/styleControl";
 import {
+  InputFieldStyle,
   InputLikeStyle,
   InputLikeStyleType,
   LabelStyle,
@@ -73,7 +74,7 @@ const childrenMap = {
   ...textInputChildren,
   viewRef: RefControl<InputRef>,
   allowClear: BoolControl.DEFAULT_TRUE,
-  style: styleControl(InputLikeStyle),
+  style: styleControl(InputFieldStyle),
   labelStyle:styleControl(LabelStyle),
   prefixIcon: IconControl,
   suffixIcon: IconControl,
@@ -87,6 +88,7 @@ const childrenMap = {
   autocompleteIconColor: dropdownControl(autocompleteIconColor, "blue"),
   componentSize: dropdownControl(componentSize, "small"),
   valueInItems: booleanExposingStateControl("valueInItems"),
+  inputFieldStyle: styleControl(InputLikeStyle),
 };
 
 const getValidate = (value: any): "" | "warning" | "error" | undefined => {
@@ -155,11 +157,11 @@ let AutoCompleteCompBase = (function () {
           <ConfigProvider
             theme={{
               token: {
-                colorBgContainer: props.style.background,
-                colorBorder: props.style.border,
-                borderRadius: parseInt(props.style.radius),
-                colorText: props.style.text,
-                colorPrimary: props.style.accent,
+                colorBgContainer: props.inputFieldStyle.background,
+                colorBorder: props.inputFieldStyle.border,
+                borderRadius: parseInt(props.inputFieldStyle.radius),
+                colorText: props.inputFieldStyle.text,
+                colorPrimary: props.inputFieldStyle.accent,
                 controlHeight: componentSize === "small" ? 30 : 38,
               },
             }}
@@ -268,7 +270,7 @@ let AutoCompleteCompBase = (function () {
                   ref={props.viewRef}
                   placeholder={placeholder}
                   allowClear={props.allowClear}
-                  $style={props.style}
+                  $style={props.inputFieldStyle}
                   prefix={hasIcon(props.prefixIcon) && props.prefixIcon}
                   suffix={hasIcon(props.suffixIcon) && props.suffixIcon}
                   status={getValidate(validateState)}
@@ -279,7 +281,8 @@ let AutoCompleteCompBase = (function () {
         </>
       ),
       style: props.style,
-      labelStyle:props.labelStyle,
+      labelStyle: props.labelStyle,
+      inputFieldStyle:props.inputFieldStyle,
       ...validateState,
     });
   })
@@ -341,6 +344,9 @@ let AutoCompleteCompBase = (function () {
           <Section name={sectionNames.labelStyle}>
             {children.labelStyle.getPropertyView()}
           </Section>
+          <Section name={sectionNames.inputFieldStyle}>
+            {children.inputFieldStyle.getPropertyView()}
+          </Section>
         </>
       );
     })
diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx b/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx
index 2977a60e2..2d485b0d9 100644
--- a/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx
@@ -20,7 +20,7 @@ import { UICompBuilder, withDefault } from "../../generators";
 import { CommonNameConfig, depsConfig, withExposingConfigs } from "../../generators/withExposing";
 import { formDataChildren, FormDataPropertyView } from "../formComp/formDataConstants";
 import { styleControl } from "comps/controls/styleControl";
-import { DateTimeStyle, DateTimeStyleType, LabelStyle } from "comps/controls/styleControlConstants";
+import {  DateTimeStyle, DateTimeStyleType, InputFieldStyle, LabelStyle } from "comps/controls/styleControlConstants";
 import { withMethodExposing } from "../../generators/withMethodExposing";
 import {
   disabledPropertyView,
@@ -71,11 +71,12 @@ const commonChildren = {
   hourStep: RangeControl.closed(1, 24, 1),
   minuteStep: RangeControl.closed(1, 60, 1),
   secondStep: RangeControl.closed(1, 60, 1),
-  style: styleControl(DateTimeStyle),
+  style: styleControl(InputFieldStyle),
   labelStyle: styleControl(LabelStyle.filter((style) => ['accent', 'validate'].includes(style.name) === false)),
   suffixIcon: withDefault(IconControl, "/icon:regular/calendar"),
   ...validationChildren,
   viewRef: RefControl<CommonPickerMethods>,
+  inputFieldStyle:styleControl(DateTimeStyle)
 };
 type CommonChildrenType = RecordConstructorToComp<typeof commonChildren>;
 
@@ -166,12 +167,13 @@ export const datePickerControl = new UICompBuilder(childrenMap, (props) => {
   return props.label({
     required: props.required,
     style: props.style,
-    labelStyle:props.labelStyle,
+    labelStyle: props.labelStyle,
+    inputFieldStyle:props.inputFieldStyle,
     children: (
       <DateUIView
         viewRef={props.viewRef}
         disabledTime={() => disabledTime(props.minTime, props.maxTime)}
-        $style={props.style}
+        $style={props.inputFieldStyle}
         disabled={props.disabled}
         {...datePickerProps(props)}
         minDate={props.minDate}
@@ -253,6 +255,9 @@ export const datePickerControl = new UICompBuilder(childrenMap, (props) => {
             <Section name={sectionNames.labelStyle}>
               {children.labelStyle.getPropertyView()}
             </Section>
+            <Section name={sectionNames.inputFieldStyle}>
+              {children.inputFieldStyle.getPropertyView()}
+            </Section>
           </>
         )}
       </>
@@ -281,7 +286,7 @@ export const dateRangeControl = (function () {
     const children = (
       <DateRangeUIView
         viewRef={props.viewRef}
-        $style={props.style}
+        $style={props.inputFieldStyle}
         disabled={props.disabled}
         {...datePickerProps(props)}
         start={start.isValid() ? start : null}
@@ -319,6 +324,7 @@ export const dateRangeControl = (function () {
       style: props.style,
       labelStyle:props.labelStyle,
       children: children,
+      inputFieldStyle:props.inputFieldStyle,
       ...(startResult.validateStatus !== "success"
         ? startResult
         : endResult.validateStatus !== "success"
@@ -383,6 +389,9 @@ export const dateRangeControl = (function () {
               <Section name={sectionNames.labelStyle}>
                 {children.labelStyle.getPropertyView()}
               </Section>
+              <Section name={sectionNames.inputFieldStyle}>
+                {children.inputFieldStyle.getPropertyView()}
+              </Section>
             </>
           )}
 
diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/dateCompUtil.ts b/client/packages/lowcoder/src/comps/comps/dateComp/dateCompUtil.ts
index 8e75fbd4a..cdd2f7662 100644
--- a/client/packages/lowcoder/src/comps/comps/dateComp/dateCompUtil.ts
+++ b/client/packages/lowcoder/src/comps/comps/dateComp/dateCompUtil.ts
@@ -73,6 +73,8 @@ export const getStyle = (style: DateTimeStyleType) => {
     &:not(.ant-picker-disabled) {
       border-color: ${style.border};
       background-color: ${style.background};
+      border-width: ${style.borderWidth};
+      border-style: ${style.borderStyle};
 
       input {
         color: ${style.text};
diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx
index 58e0a3544..6f78d16df 100644
--- a/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx
@@ -30,7 +30,7 @@ import { formDataChildren, FormDataPropertyView } from "../formComp/formDataCons
 import { withMethodExposing, refMethods } from "../../generators/withMethodExposing";
 import { RefControl } from "../../controls/refControl";
 import { styleControl } from "comps/controls/styleControl";
-import { InputLikeStyle, InputLikeStyleType, LabelStyle, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
+import {  InputFieldStyle, InputLikeStyle, InputLikeStyleType, LabelStyle, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
 import {
   disabledPropertyView,
   hiddenPropertyView,
@@ -257,10 +257,10 @@ const childrenMap = {
   allowNull: BoolControl,
   onEvent: InputEventHandlerControl,
   viewRef: RefControl<HTMLInputElement>,
-  style: styleControl(InputLikeStyle),
+  style: styleControl(InputFieldStyle),
   labelStyle:styleControl(LabelStyle),
   prefixIcon: IconControl,
-
+  inputFieldStyle:styleControl(InputLikeStyle),
   // validation
   required: BoolControl,
   min: UndefinedNumberControl,
@@ -322,7 +322,7 @@ const CustomInputNumber = (props: RecordConstructorToView<typeof childrenMap>) =
       placeholder={props.placeholder}
       stringMode={true}
       precision={props.precision}
-      $style={props.style}
+      $style={props.inputFieldStyle}
       prefix={hasIcon(props.prefixIcon) && props.prefixIcon}
       onPressEnter={() => {
         handleFinish();
@@ -381,7 +381,8 @@ let NumberInputTmpComp = (function () {
       required: props.required,
       children: <CustomInputNumber {...props} />,
       style: props.style,
-      labelStyle:props.labelStyle,
+      labelStyle: props.labelStyle,
+      inputFieldStyle:props.inputFieldStyle,
       ...validate(props),
     });
   })
@@ -436,6 +437,9 @@ let NumberInputTmpComp = (function () {
           <Section name={sectionNames.labelStyle}>
             {children.labelStyle.getPropertyView()}
           </Section>
+          <Section name={sectionNames.inputFieldStyle}>
+            {children.inputFieldStyle.getPropertyView()}
+          </Section>
           </>
         )}
       </>
diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/rangeSliderComp.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/rangeSliderComp.tsx
index 7deb69530..12c39ad6b 100644
--- a/client/packages/lowcoder/src/comps/comps/numberInputComp/rangeSliderComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/numberInputComp/rangeSliderComp.tsx
@@ -16,6 +16,7 @@ const RangeSliderBasicComp = (function () {
     return props.label({
       style: props.style,
       labelStyle: props.labelStyle,
+      inputFieldStyle:props.inputFieldStyle,
       children: (
         <SliderWrapper
           onMouseDown={(e: any) => {
@@ -28,7 +29,7 @@ const RangeSliderBasicComp = (function () {
             {...props}
             range={true}
             value={[props.start.value, props.end.value]}
-            $style={props.style}
+            $style={props.inputFieldStyle}
             style={{ margin: 0 }}
             onChange={([start, end]) => {
               props.start.onChange(start);
diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx
index af9c81b76..4a37da1fc 100644
--- a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx
@@ -19,7 +19,8 @@ const SliderBasicComp = (function () {
   return new UICompBuilder(childrenMap, (props) => {
     return props.label({
       style: props.style,
-      labelStyle:props.labelStyle,
+      labelStyle: props.labelStyle,
+      inputFieldStyle:props.inputFieldStyle,
       children: (
         <SliderWrapper
           onMouseDown={(e: any) => {
@@ -31,7 +32,7 @@ const SliderBasicComp = (function () {
           <SliderStyled
             {...props}
             value={props.value.value}
-            $style={props.style}
+            $style={props.inputFieldStyle}
             style={{margin: 0}}
             // FALK TODO : vertical={true}
             onChange={(e) => {
diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx
index 04d3b7f48..6e6a44ac7 100644
--- a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx
+++ b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx
@@ -5,7 +5,7 @@ import { ChangeEventHandlerControl } from "../../controls/eventHandlerControl";
 import { Section, sectionNames } from "lowcoder-design";
 import { RecordConstructorToComp } from "lowcoder-core";
 import { styleControl } from "comps/controls/styleControl";
-import { LabelStyle, SliderStyle, SliderStyleType } from "comps/controls/styleControlConstants";
+import {  InputFieldStyle, LabelStyle, SliderStyle, SliderStyleType } from "comps/controls/styleControlConstants";
 import styled, { css } from "styled-components";
 import { default as Slider } from "antd/es/slider";
 import { darkenColor, fadeColor } from "lowcoder-design";
@@ -67,10 +67,11 @@ export const SliderChildren = {
   label: LabelControl,
   disabled: BoolCodeControl,
   onEvent: ChangeEventHandlerControl,
-  style: styleControl(SliderStyle),
+  style: styleControl(InputFieldStyle),
   labelStyle:styleControl(LabelStyle.filter((style)=> ['accent','validate'].includes(style.name) === false)),
   prefixIcon: IconControl,
   suffixIcon: IconControl,
+  inputFieldStyle:styleControl(SliderStyle)
 };
 
 export const SliderPropertyView = (
@@ -101,6 +102,9 @@ export const SliderPropertyView = (
         <Section name={sectionNames.labelStyle}>
           {children.labelStyle.getPropertyView()}
         </Section>
+        <Section name={sectionNames.inputFieldStyle}>
+          {children.inputFieldStyle.getPropertyView()}
+        </Section>
       </>
     )}
   </>
diff --git a/client/packages/lowcoder/src/comps/comps/ratingComp.tsx b/client/packages/lowcoder/src/comps/comps/ratingComp.tsx
index df93e688c..0f095d5a6 100644
--- a/client/packages/lowcoder/src/comps/comps/ratingComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/ratingComp.tsx
@@ -10,7 +10,7 @@ import { UICompBuilder, withDefault } from "../generators";
 import { CommonNameConfig, NameConfig, withExposingConfigs } from "../generators/withExposing";
 import { formDataChildren, FormDataPropertyView } from "./formComp/formDataConstants";
 import { styleControl } from "comps/controls/styleControl";
-import { LabelStyle, RatingStyle, RatingStyleType } from "comps/controls/styleControlConstants";
+import {  InputFieldStyle, LabelStyle, RatingStyle, RatingStyleType } from "comps/controls/styleControlConstants";
 import { migrateOldData } from "comps/generators/simpleGenerators";
 import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
@@ -43,8 +43,9 @@ const RatingBasicComp = (function () {
     allowHalf: BoolControl,
     disabled: BoolCodeControl,
     onEvent: eventHandlerControl(EventOptions),
-    style: migrateOldData(styleControl(RatingStyle), fixOldData),
+    style: styleControl(InputFieldStyle),
     labelStyle: styleControl(LabelStyle.filter((style) => ['accent', 'validate'].includes(style.name) === false)),
+    inputFieldStyle:migrateOldData(styleControl(RatingStyle), fixOldData),
     ...formDataChildren,
   };
   return new UICompBuilder(childrenMap, (props) => {
@@ -66,6 +67,7 @@ const RatingBasicComp = (function () {
     return props.label({
       style: props.style,
       labelStyle: props.labelStyle,
+      inputFieldStyle:props.inputFieldStyle,
       children: (
         <RateStyled
           count={props.max}
@@ -76,7 +78,7 @@ const RatingBasicComp = (function () {
           }}
           allowHalf={props.allowHalf}
           disabled={props.disabled}
-          $style={props.style}
+          $style={props.inputFieldStyle}
         />
       ),
     });
@@ -119,6 +121,9 @@ const RatingBasicComp = (function () {
               <Section name={sectionNames.labelStyle}>
                 {children.labelStyle.getPropertyView()}
               </Section>
+              <Section name={sectionNames.inputFieldStyle}>
+                {children.inputFieldStyle.getPropertyView()}
+              </Section>
             </>
           )}
         </>
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx
index 6a5b9babf..dc4d83d35 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx
@@ -21,7 +21,8 @@ let CascaderBasicComp = (function () {
   return new UICompBuilder(childrenMap, (props) => {
     return props.label({
       style: props.style,
-      labelStyle:props.labelStyle,
+      labelStyle: props.labelStyle,
+      inputFieldStyle:props.inputFieldStyle,
       children: (
         <CascaderStyle
           ref={props.viewRef}
@@ -32,7 +33,7 @@ let CascaderBasicComp = (function () {
           allowClear={props.allowClear}
           placeholder={props.placeholder}
           showSearch={props.showSearch}
-          $style={props.style}
+          $style={props.inputFieldStyle}
           onFocus={() => props.onEvent("focus")}
           onBlur={() => props.onEvent("blur")}
           onChange={(value: (string | number)[]) => {
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderContants.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderContants.tsx
index 3006c12c3..f93d44ff7 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderContants.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderContants.tsx
@@ -6,7 +6,7 @@ import { arrayStringExposingStateControl } from "comps/controls/codeStateControl
 import { BoolControl } from "comps/controls/boolControl";
 import { LabelControl } from "comps/controls/labelControl";
 import { styleControl } from "comps/controls/styleControl";
-import { CascaderStyle, LabelStyle } from "comps/controls/styleControlConstants";
+import { CascaderStyle, InputFieldStyle, LabelStyle } from "comps/controls/styleControlConstants";
 import {
   allowClearPropertyView,
   disabledPropertyView,
@@ -34,12 +34,13 @@ export const CascaderChildren = {
   onEvent: SelectEventHandlerControl,
   allowClear: BoolControl,
   options: JSONObjectArrayControl,
-  style: styleControl(CascaderStyle),
+  style: styleControl(InputFieldStyle),
   labelStyle: styleControl(LabelStyle.filter((style) => ['accent', 'validate'].includes(style.name) === false)),
   showSearch: BoolControl.DEFAULT_TRUE,
   viewRef: RefControl<CascaderRef>,
   margin: MarginControl,
   padding: PaddingControl,
+  inputFieldStyle:styleControl(CascaderStyle)
 };
 
 export const CascaderPropertyView = (
@@ -79,6 +80,9 @@ export const CascaderPropertyView = (
         <Section name={sectionNames.labelStyle}>
           {children.labelStyle.getPropertyView()}
         </Section>
+        <Section name={sectionNames.inputFieldStyle}>
+          {children.inputFieldStyle.getPropertyView()}
+        </Section>
       </>
     )}
   </>
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx
index 9ff59edc0..c0cc28a7d 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx
@@ -15,7 +15,7 @@ import {
 } from "./selectInputConstants";
 import { formDataChildren } from "../formComp/formDataConstants";
 import { styleControl } from "comps/controls/styleControl";
-import { CheckboxStyle, CheckboxStyleType, LabelStyle } from "comps/controls/styleControlConstants";
+import { CheckboxStyle, CheckboxStyleType, InputFieldStyle, LabelStyle } from "comps/controls/styleControlConstants";
 import { RadioLayoutOptions, RadioPropertyView } from "./radioCompConstants";
 import { dropdownControl } from "../../controls/dropdownControl";
 import { ValueFromOption } from "lowcoder-design";
@@ -136,11 +136,11 @@ let CheckboxBasicComp = (function () {
     disabled: BoolCodeControl,
     onEvent: ChangeEventHandlerControl,
     options: SelectInputOptionControl,
-    style: styleControl(CheckboxStyle),
+    style: styleControl(InputFieldStyle),
     labelStyle: styleControl(LabelStyle.filter((style) => ['accent', 'validate'].includes(style.name) === false)),
     layout: dropdownControl(RadioLayoutOptions, "horizontal"),
     viewRef: RefControl<HTMLDivElement>,
-
+    inputFieldStyle:styleControl(CheckboxStyle),
     ...SelectInputValidationChildren,
     ...formDataChildren,
   };
@@ -153,12 +153,13 @@ let CheckboxBasicComp = (function () {
       required: props.required,
       style: props.style,
       labelStyle: props.labelStyle,
+      inputFieldStyle:props.inputFieldStyle,
       children: (
         <CheckboxGroup
           ref={props.viewRef}
           disabled={props.disabled}
           value={props.value.value}
-          $style={props.style}
+          $style={props.inputFieldStyle}
           $layout={props.layout}
           options={props.options
             .filter((option) => option.value !== undefined && !option.hidden)
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/multiSelectComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/multiSelectComp.tsx
index 5dc7192da..94b7b0fd9 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/multiSelectComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/multiSelectComp.tsx
@@ -1,5 +1,5 @@
 import { styleControl } from "comps/controls/styleControl";
-import { LabelStyle, MultiSelectStyle } from "comps/controls/styleControlConstants";
+import {  InputFieldStyle, LabelStyle, MultiSelectStyle } from "comps/controls/styleControlConstants";
 import { trans } from "i18n";
 import { arrayStringExposingStateControl } from "../../controls/codeStateControl";
 import { UICompBuilder } from "../../generators";
@@ -22,8 +22,9 @@ let MultiSelectBasicComp = (function () {
     ...SelectChildrenMap,
     defaultValue: arrayStringExposingStateControl("defaultValue", ["1", "2"]),
     value: arrayStringExposingStateControl("value"),
-    style: styleControl(MultiSelectStyle),
+    style: styleControl(InputFieldStyle),
     labelStyle:styleControl(LabelStyle),
+    inputFieldStyle:styleControl(MultiSelectStyle),
     margin: MarginControl,	
     padding: PaddingControl,
   };
@@ -37,7 +38,8 @@ let MultiSelectBasicComp = (function () {
     return props.label({
       required: props.required,
       style: props.style,
-      labelStyle:props.labelStyle,
+      labelStyle: props.labelStyle,
+      inputFieldStyle:props.inputFieldStyle,
       children: (
         <SelectUIView
           {...props}
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx
index ea3da9755..6b1a08fcd 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx
@@ -104,7 +104,8 @@ let RadioBasicComp = (function () {
     return props.label({
       required: props.required,
       style: props.style,
-      labelStyle:props.labelStyle,
+      labelStyle: props.labelStyle,
+      inputFieldStyle:props.inputFieldStyle,
       children: (
         <Radio
           ref={props.viewRef}
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/radioCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/radioCompConstants.tsx
index 7e11513ff..a9b93d60f 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/radioCompConstants.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/radioCompConstants.tsx
@@ -14,7 +14,7 @@ import {
 } from "./selectInputConstants";
 import { formDataChildren, FormDataPropertyView } from "../formComp/formDataConstants";
 import { styleControl } from "comps/controls/styleControl";
-import { LabelStyle, RadioStyle } from "comps/controls/styleControlConstants";
+import {  InputFieldStyle, LabelStyle, RadioStyle } from "comps/controls/styleControlConstants";
 import { dropdownControl } from "../../controls/dropdownControl";
 import { hiddenPropertyView, disabledPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
@@ -36,11 +36,11 @@ export const RadioChildrenMap = {
   disabled: BoolCodeControl,
   onEvent: ChangeEventHandlerControl,
   options: SelectInputOptionControl,
-  style: styleControl(RadioStyle),
+  style: styleControl(InputFieldStyle),
   labelStyle:styleControl(LabelStyle),
   layout: dropdownControl(RadioLayoutOptions, "horizontal"),
   viewRef: RefControl<HTMLDivElement>,
-
+  inputFieldStyle:styleControl(RadioStyle),
   ...SelectInputValidationChildren,
   ...formDataChildren,
 };
@@ -96,6 +96,7 @@ export const RadioPropertyView = (
       <>
       <Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
       <Section name={sectionNames.labelStyle}>{children.labelStyle.getPropertyView()}</Section>
+      <Section name={sectionNames.inputFieldStyle}>{children.inputFieldStyle.getPropertyView()}</Section>
       </>
     )}
   </>
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/selectComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/selectComp.tsx
index 72483ba3b..4341581e3 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/selectComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/selectComp.tsx
@@ -1,5 +1,5 @@
 import { styleControl } from "comps/controls/styleControl";
-import { LabelStyle, SelectStyle } from "comps/controls/styleControlConstants";
+import {  InputFieldStyle, LabelStyle, SelectStyle } from "comps/controls/styleControlConstants";
 import { trans } from "i18n";
 import { stringExposingStateControl } from "../../controls/codeStateControl";
 import { UICompBuilder } from "../../generators";
@@ -25,8 +25,9 @@ let SelectBasicComp = (function () {
     ...SelectChildrenMap,
     defaultValue: stringExposingStateControl("defaultValue"),
     value: stringExposingStateControl("value"),
-    style: styleControl(SelectStyle),
-    labelStyle: styleControl(LabelStyle)
+    style: styleControl(InputFieldStyle),
+    labelStyle: styleControl(LabelStyle),
+    inputFieldStyle: styleControl(SelectStyle)
   };
   return new UICompBuilder(childrenMap, (props, dispatch) => {
     const [
@@ -42,7 +43,8 @@ let SelectBasicComp = (function () {
     return props.label({
       required: props.required,
       style: props.style,
-      labelStyle:props.labelStyle,
+      labelStyle: props.labelStyle,
+      inputFieldStyle:props.inputFieldStyle,
       children: (
         <SelectUIView
           {...props}
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx
index a27be655c..3ae61995f 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx
@@ -38,6 +38,8 @@ import {
   TreeSelectStyleType,
   widthCalculator,
   heightCalculator,
+  
+  SelectStyle,
 } from "comps/controls/styleControlConstants";
 import { stateComp, withDefault } from "../../generators";
 import {
@@ -56,6 +58,7 @@ import { blurMethod, focusMethod } from "comps/utils/methodUtils";
 
 import { useContext } from "react";
 import { EditorContext } from "comps/editorState";
+import { styleControl } from "@lowcoder-ee/index.sdk";
 
 export const getStyle = (
   style:
@@ -217,6 +220,7 @@ export const SelectChildrenMap = {
   viewRef: RefControl<BaseSelectRef>,
   margin: MarginControl,
   padding: PaddingControl,
+  inputFieldStyle:styleControl(SelectStyle),
   ...SelectInputValidationChildren,
   ...formDataChildren,
 };
@@ -291,6 +295,7 @@ export const SelectPropertyView = (
     value: { propertyView: (params: ControlParams) => ControlNode };
     style: { getPropertyView: () => ControlNode };
     labelStyle: { getPropertyView: () => ControlNode };
+    inputFieldStyle: { getPropertyView: () => ControlNode };
   }
 ) => (
   <>
@@ -336,6 +341,9 @@ export const SelectPropertyView = (
           <Section name={sectionNames.labelStyle}>
             {children.labelStyle.getPropertyView()}
           </Section>
+          <Section name={sectionNames.inputFieldStyle}>
+            {children.inputFieldStyle.getPropertyView()}
+          </Section>
         </>
       )}
   </>
diff --git a/client/packages/lowcoder/src/comps/comps/signatureComp.tsx b/client/packages/lowcoder/src/comps/comps/signatureComp.tsx
index e4efcc1a5..d30e35999 100644
--- a/client/packages/lowcoder/src/comps/comps/signatureComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/signatureComp.tsx
@@ -11,7 +11,9 @@ import {
   LabelStyle,
   SignatureStyleType,
   widthCalculator,
-  heightCalculator
+  heightCalculator,
+  
+  InputFieldStyle
 } from "comps/controls/styleControlConstants";
 import { stateComp, withDefault } from "comps/generators/simpleGenerators";
 import { hiddenPropertyView } from "comps/utils/propertyUtils";
@@ -98,12 +100,12 @@ const childrenMap = {
   tips: withDefault(StringControl, trans("signature.signHere")),
   onEvent: ChangeEventHandlerControl,
   label: withDefault(LabelControl, { position: "column", text: "" }),
-  style: styleControl(SignatureStyle),
+  style: styleControl(InputFieldStyle),
   labelStyle: styleControl(LabelStyle),
   showUndo: withDefault(BoolControl, true),
   showClear: withDefault(BoolControl, true),
   value: stateComp(""),
-
+  inputFieldStyle:styleControl(SignatureStyle),
   ...formDataChildren,
 };
 
@@ -128,7 +130,8 @@ let SignatureTmpComp = (function () {
     };
     return props.label({
       style: props.style,
-      labelStyle:props.labelStyle,
+      labelStyle: props.labelStyle,
+      inputFieldStyle:props.inputFieldStyle,
       children: (
         <ReactResizeDetector
           onResize={(width, height) => {
@@ -140,7 +143,7 @@ let SignatureTmpComp = (function () {
             onMouseDown={(e) => {
               e.preventDefault();
             }}
-            $style={props.style}
+            $style={props.inputFieldStyle}
             $isEmpty={!props.value && !isBegin}
           >
             <div className="signature">
@@ -149,7 +152,7 @@ let SignatureTmpComp = (function () {
                   ref={(ref) => {
                     canvas = ref;
                   }}
-                  penColor={props.style.pen}
+                  penColor={props.inputFieldStyle.pen}
                   clearOnResize={false}
                   canvasProps={{
                     className: "sigCanvas",
@@ -228,6 +231,9 @@ let SignatureTmpComp = (function () {
               <Section name={sectionNames.labelStyle}>
                 {children.labelStyle.getPropertyView()}
               </Section>
+              <Section name={sectionNames.inputFieldStyle}>
+                {children.inputFieldStyle.getPropertyView()}
+              </Section>
             </>
           )}
         </>
diff --git a/client/packages/lowcoder/src/comps/comps/switchComp.tsx b/client/packages/lowcoder/src/comps/comps/switchComp.tsx
index 70c6a4379..8b113857f 100644
--- a/client/packages/lowcoder/src/comps/comps/switchComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/switchComp.tsx
@@ -4,7 +4,7 @@ import { booleanExposingStateControl } from "comps/controls/codeStateControl";
 import { changeEvent, eventHandlerControl } from "comps/controls/eventHandlerControl";
 import { LabelControl } from "comps/controls/labelControl";
 import { styleControl } from "comps/controls/styleControl";
-import { SwitchStyle, SwitchStyleType, LabelStyle } from "comps/controls/styleControlConstants";
+import { SwitchStyle, SwitchStyleType, LabelStyle,  InputFieldStyle } from "comps/controls/styleControlConstants";
 import { migrateOldData } from "comps/generators/simpleGenerators";
 import { Section, sectionNames } from "lowcoder-design";
 import styled, { css } from "styled-components";
@@ -89,18 +89,19 @@ let SwitchTmpComp = (function () {
     label: LabelControl,
     onEvent: eventHandlerControl(EventOptions),
     disabled: BoolCodeControl,
-    style: migrateOldData(styleControl(SwitchStyle), fixOldData),
+    style: styleControl(InputFieldStyle),
     labelStyle: styleControl(LabelStyle.filter((style) => ['accent', 'validate'].includes(style.name) === false)),
     viewRef: RefControl<HTMLElement>,
-
+    inputFieldStyle:migrateOldData(styleControl(SwitchStyle), fixOldData),
     ...formDataChildren,
   };
   return new UICompBuilder(childrenMap, (props) => {
     return props.label({
       style: props.style,
-      labelStyle:props.labelStyle,
+      labelStyle: props.labelStyle,
+      inputFieldStyle:props.inputFieldStyle,
       children: (
-        <SwitchWrapper disabled={props.disabled} $style={props.style}>
+        <SwitchWrapper disabled={props.disabled} $style={props.inputFieldStyle}>
           <Switch
             checked={props.value.value}
             disabled={props.disabled}
@@ -144,6 +145,9 @@ let SwitchTmpComp = (function () {
               <Section name={sectionNames.labelStyle}>
                 {children.labelStyle.getPropertyView()}
               </Section>
+              <Section name={sectionNames.inputFieldStyle}>
+                {children.inputFieldStyle.getPropertyView()}
+              </Section>
             </>
           )}
         </>
diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx
index e7a8698c7..bb81449ac 100644
--- a/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx
@@ -1,7 +1,7 @@
 import { Input, Section, sectionNames } from "lowcoder-design";
 import { BoolControl } from "comps/controls/boolControl";
 import { styleControl } from "comps/controls/styleControl";
-import { InputLikeStyle, InputLikeStyleType, LabelStyle, LabelStyleType } from "comps/controls/styleControlConstants";
+import { InputFieldStyle, InputLikeStyle, InputLikeStyleType, LabelStyle, LabelStyleType } from "comps/controls/styleControlConstants";
 import {
   NameConfig,
   NameConfigPlaceHolder,
@@ -49,10 +49,11 @@ const childrenMap = {
   viewRef: RefControl<InputRef>,
   showCount: BoolControl,
   allowClear: BoolControl,
-  style: styleControl(InputLikeStyle),
+  style: styleControl(InputFieldStyle),
   labelStyle: styleControl(LabelStyle),
   prefixIcon: IconControl,
   suffixIcon: IconControl,
+  inputFieldStyle: styleControl(InputLikeStyle),
 };
 
 let InputBasicComp = new UICompBuilder(childrenMap, (props) => {
@@ -65,13 +66,14 @@ let InputBasicComp = new UICompBuilder(childrenMap, (props) => {
         ref={props.viewRef}
         showCount={props.showCount}
         allowClear={props.allowClear}
-        $style={props.style}
+        $style={props.inputFieldStyle}
         prefix={hasIcon(props.prefixIcon) && props.prefixIcon}
         suffix={hasIcon(props.suffixIcon) && props.suffixIcon}
       />
     ),
     style: props.style,
     labelStyle: props.labelStyle,
+    inputFieldStyle:props.inputFieldStyle,
     ...validateState,
   });
 })
@@ -102,6 +104,7 @@ let InputBasicComp = new UICompBuilder(childrenMap, (props) => {
           <>
             <Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
             <Section name={sectionNames.labelStyle}>{children.labelStyle.getPropertyView()}</Section>
+            <Section name={sectionNames.inputFieldStyle}>{children.inputFieldStyle.getPropertyView()}</Section>
           </>
         )}
       </>
diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx
index 19944f019..da4e14211 100644
--- a/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx
@@ -26,7 +26,7 @@ import {
 import { withMethodExposing } from "../../generators/withMethodExposing";
 import { styleControl } from "comps/controls/styleControl";
 import styled from "styled-components";
-import { InputLikeStyle, InputLikeStyleType, LabelStyle } from "comps/controls/styleControlConstants";
+import {  InputFieldStyle, InputLikeStyle, InputLikeStyleType, LabelStyle } from "comps/controls/styleControlConstants";
 import {
   hiddenPropertyView,
   minLengthPropertyView,
@@ -57,8 +57,9 @@ let PasswordTmpComp = (function () {
     validationType: dropdownControl(TextInputValidationOptions, "Regex"),
     visibilityToggle: BoolControl.DEFAULT_TRUE,
     prefixIcon: IconControl,
-    style: styleControl(InputLikeStyle),
-    labelStyle: styleControl(LabelStyle)
+    style: styleControl(InputFieldStyle),
+    labelStyle: styleControl(LabelStyle),
+    inputFieldStyle: styleControl(InputLikeStyle)
   };
   return new UICompBuilder(childrenMap, (props) => {
     const [inputProps, validateState] = useTextInputProps(props);
@@ -70,11 +71,12 @@ let PasswordTmpComp = (function () {
           {...inputProps}
           ref={props.viewRef}
           visibilityToggle={props.visibilityToggle}
-          $style={props.style}
+          $style={props.inputFieldStyle}
         />
       ),
       style: props.style,
-      labelStyle:props.labelStyle,
+      labelStyle: props.labelStyle,
+      inputFieldStyle:props.inputFieldStyle,
       ...validateState,
     });
   })
@@ -110,6 +112,7 @@ let PasswordTmpComp = (function () {
             <>
               <Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
               <Section name={sectionNames.labelStyle}>{children.labelStyle.getPropertyView()}</Section>
+              <Section name={sectionNames.inputFieldStyle}>{children.inputFieldStyle.getPropertyView()}</Section>
             </>
           )}
         </>
diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx
index b13615682..b6e4966fb 100644
--- a/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx
@@ -22,7 +22,7 @@ import {
 import { withMethodExposing, refMethods } from "../../generators/withMethodExposing";
 import { styleControl } from "comps/controls/styleControl";
 import styled from "styled-components";
-import { InputLikeStyle, InputLikeStyleType, LabelStyle } from "comps/controls/styleControlConstants";
+import {  InputFieldStyle, InputLikeStyle, InputLikeStyleType, LabelStyle } from "comps/controls/styleControlConstants";
 import { TextArea } from "components/TextArea";
 import {
   allowClearPropertyView,
@@ -71,21 +71,23 @@ let TextAreaTmpComp = (function () {
     viewRef: RefControl<TextAreaRef>,
     allowClear: BoolControl,
     autoHeight: withDefault(AutoHeightControl, "fixed"),
-    style: styleControl(InputLikeStyle),
-    labelStyle: styleControl(LabelStyle)
+    style: styleControl(InputFieldStyle),
+    labelStyle: styleControl(LabelStyle),
+    inputFieldStyle: styleControl(InputLikeStyle)
   };
   return new UICompBuilder(childrenMap, (props) => {
     const [inputProps, validateState] = useTextInputProps(props);
     return props.label({
       required: props.required,
+      inputFieldStyle:props.inputFieldStyle,
       children: (
-        <Wrapper $style={props.style}>
+        <Wrapper $style={props.inputFieldStyle}>
           <TextAreaStyled
             {...inputProps}
             ref={props.viewRef}
             allowClear={props.allowClear}
             style={{ height: "100% !important", resize: "vertical" }}
-            $style={props.style}
+            $style={props.inputFieldStyle}
           />
         </Wrapper>
       ),
@@ -120,6 +122,7 @@ let TextAreaTmpComp = (function () {
           <>
             <Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
             <Section name={sectionNames.labelStyle}>{children.labelStyle.getPropertyView()}</Section>
+            <Section name={sectionNames.inputFieldStyle}>{children.inputFieldStyle.getPropertyView()}</Section>
           </>
         )}
       </>
diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx
index e0b39b127..f2212358e 100644
--- a/client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx
@@ -250,7 +250,7 @@ export function getStyle(style: InputLikeStyleType, labelStyle?: LabelStyleType)
       font-style:${style.fontStyle};
       text-transform:${style.textTransform};
       text-decoration:${style.textDecoration};
-      // background-color: ${style.background};
+      background-color: ${style.background};
       border-color: ${style.border};
 
       &:focus,
diff --git a/client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx b/client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx
index 753df6688..1969bffc2 100644
--- a/client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx
@@ -7,7 +7,7 @@ import { useEffect, useState } from "react";
 import styled from "styled-components";
 import ReactResizeDetector from "react-resize-detector";
 import { StyleConfigType, styleControl } from "comps/controls/styleControl";
-import { LabelStyle, TreeStyle } from "comps/controls/styleControlConstants";
+import {  InputFieldStyle, LabelStyle, TreeStyle } from "comps/controls/styleControlConstants";
 import { LabelControl } from "comps/controls/labelControl";
 import { withDefault } from "comps/generators";
 import { dropdownControl } from "comps/controls/dropdownControl";
@@ -76,8 +76,9 @@ const childrenMap = {
   label: withDefault(LabelControl, { position: "column" }),
   // TODO: more event
   onEvent: SelectEventHandlerControl,
-  style: styleControl(TreeStyle),
-  labelStyle: styleControl(LabelStyle.filter((style) => ['accent', 'validate'].includes(style.name) === false))
+  style: styleControl(InputFieldStyle),
+  labelStyle: styleControl(LabelStyle.filter((style) => ['accent', 'validate'].includes(style.name) === false)),
+  inputFieldStyle:styleControl(TreeStyle)
 };
 
 const TreeCompView = (props: RecordConstructorToView<typeof childrenMap>) => {
@@ -98,14 +99,15 @@ const TreeCompView = (props: RecordConstructorToView<typeof childrenMap>) => {
     ...selectInputValidate(props),
     style,
     labelStyle,
+    inputFieldStyle:props.inputFieldStyle,
     children: (
       <ReactResizeDetector onResize={(w, h) => setHeight(h)}>
-        <Container {...style}>
+        <Container {...props.inputFieldStyle}>
           <Tree
             key={selectType}
             disabled={props.disabled}
             height={height}
-            rootStyle={{ background: "transparent", color: style.text }}
+            rootStyle={{ background: "transparent", color: props.inputFieldStyle.text }}
             fieldNames={{ title: "label", key: "value" }}
             treeData={treeData}
             selectable={selectable}
@@ -184,6 +186,7 @@ let TreeBasicComp = (function () {
           <>
             <Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
             <Section name={sectionNames.labelStyle}>{children.labelStyle.getPropertyView()}</Section>
+            <Section name={sectionNames.inputFieldStyle}>{children.inputFieldStyle.getPropertyView()}</Section>
           </>
         )}
       </>
diff --git a/client/packages/lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx b/client/packages/lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx
index de15121b3..2771d1512 100644
--- a/client/packages/lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx
@@ -6,7 +6,7 @@ import { default as TreeSelect } from "antd/es/tree-select";
 import { useEffect } from "react";
 import styled from "styled-components";
 import { styleControl } from "comps/controls/styleControl";
-import { LabelStyle, TreeSelectStyle, TreeSelectStyleType } from "comps/controls/styleControlConstants";
+import {  InputFieldStyle, LabelStyle, TreeSelectStyle, TreeSelectStyleType } from "comps/controls/styleControlConstants";
 import { LabelControl } from "comps/controls/labelControl";
 import { dropdownControl } from "comps/controls/dropdownControl";
 import {
@@ -65,8 +65,9 @@ const childrenMap = {
   allowClear: BoolControl,
   showSearch: BoolControl.DEFAULT_TRUE,
   inputValue: stateComp<string>(""), // search value
-  style: styleControl(TreeSelectStyle),
+  style: styleControl(InputFieldStyle),
   labelStyle:styleControl(LabelStyle),
+  inputFieldStyle:styleControl(TreeSelectStyle),
   viewRef: RefControl<BaseSelectRef>,
 };
 
@@ -102,11 +103,12 @@ const TreeCompView = (
     ...validateState,
     style,
     labelStyle,
+    inputFieldStyle:props.inputFieldStyle,
     children: (
       <StyledTreeSelect
         ref={props.viewRef}
         key={selectType}
-        $style={style}
+        $style={props.inputFieldStyle}
         popupMatchSelectWidth={false}
         disabled={props.disabled}
         placeholder={props.placeholder}
@@ -185,6 +187,7 @@ let TreeBasicComp = (function () {
           <>
           <Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
           <Section name={sectionNames.labelStyle}>{children.labelStyle.getPropertyView()}</Section>
+          <Section name={sectionNames.inputFieldStyle}>{children.inputFieldStyle.getPropertyView()}</Section>
           </>
         )}
       </>
diff --git a/client/packages/lowcoder/src/comps/controls/labelControl.tsx b/client/packages/lowcoder/src/comps/controls/labelControl.tsx
index 2d53a2205..bdbe6a0ed 100644
--- a/client/packages/lowcoder/src/comps/controls/labelControl.tsx
+++ b/client/packages/lowcoder/src/comps/controls/labelControl.tsx
@@ -21,6 +21,8 @@ type LabelViewProps = Pick<FormItemProps, "required" | "help" | "validateStatus"
   children: ReactNode;
   style?: Record<string, string>;
   labelStyle?: Record<string, string>;
+  field?: Record<string, string>;
+  inputFieldStyle?: Record<string, string>;
 };
 
 const StyledStarIcon = styled(StarIcon)`
@@ -41,8 +43,16 @@ function getStyle(style: any) {
   `;
 }
 
-const LabelViewWrapper = styled.div<{ $style: any }>`
-  ${(props) => props.$style && getStyle(props.$style)}
+const LabelViewWrapper = styled.div<{ $style: any, inputFieldStyle: any }>`
+${(props) => {
+    return (
+      props.$style && {
+        ...props.$style,
+        borderRadius: props.$style.radius,
+      }
+    );
+  }}
+  ${(props) => props.inputFieldStyle && getStyle(props.inputFieldStyle)}
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -88,7 +98,7 @@ const Label = styled.span<{ $border: boolean, $labelStyle: LabelStyleType, $vali
   text-decoration:${(props) => props.$labelStyle.textDecoration};
   font-size:${(props) => props.$labelStyle.textSize};
   color:${(props) => !!props.$validateStatus && props?.$validateStatus === 'error' ? props.$labelStyle.validate : props.$labelStyle.label} !important;
-  ${(props) => `border-bottom:${props.$labelStyle.borderWidth} ${props.$labelStyle.borderStyle} ${!!props.$validateStatus && props?.$validateStatus === 'error' ? props.$labelStyle.validate : props.$labelStyle.border};`}
+  ${(props) => `border:${props.$labelStyle.borderWidth} ${props.$labelStyle.borderStyle} ${!!props.$validateStatus && props?.$validateStatus === 'error' ? props.$labelStyle.validate : props.$labelStyle.border};`}
   border-radius:${(props) => props.$labelStyle.radius};
   padding:${(props) => props.$labelStyle.padding};
   margin:${(props) => props.$labelStyle.margin};
@@ -159,18 +169,18 @@ export const LabelControl = (function () {
   };
 
   return new MultiCompBuilder(childrenMap, (props) => (args: LabelViewProps) => (
-    <LabelViewWrapper $style={args.style}>
+ <LabelViewWrapper $style={args.style} inputFieldStyle={args.inputFieldStyle}>
       <MainWrapper
         $position={props.position}
         $hasLabel={!!props.text}
         style={{
-          margin: args && args.style ? args?.style?.margin : 0,
-          // padding: args && args.style ? args?.style?.padding : 0,	
+          margin: args && args.inputFieldStyle ? args?.inputFieldStyle?.margin : 0,
+          // padding: args && args.inputFieldStyle ? args?.inputFieldStyle?.padding : 0,	
           width: widthCalculator(
-            args && args.style ? args?.style?.margin : "0px"
+            args && args.inputFieldStyle ? args?.inputFieldStyle?.margin : "0px"
           ),
           height: heightCalculator(
-            args && args.style ? args?.style?.margin : "0px"
+            args && args.inputFieldStyle ? args?.inputFieldStyle?.margin : "0px"
           ),
         }}
       >
@@ -237,7 +247,7 @@ export const LabelControl = (function () {
         </HelpWrapper>
       )}
     </LabelViewWrapper>
-  ))
+))
     .setPropertyViewFn((children) => (
       <Section name={trans("label")}>
         {children.text.propertyView({ label: trans("labelProp.text") })}
diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
index 171d0d14e..d9876fa55 100644
--- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
+++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
@@ -476,6 +476,15 @@ const STYLING_FIELDS_SEQUENCE = [
   BORDER_WIDTH,
 ]
 
+const STYLING_FIELDS_CONTAINER_SEQUENCE = [
+  BORDER,
+  BORDER_STYLE,
+  MARGIN,
+  PADDING,
+  RADIUS,
+  BORDER_WIDTH,
+];
+
 const FILL = {
   name: "fill",
   label: trans("style.fill"),
@@ -784,6 +793,11 @@ export const LabelStyle = [
   ...replaceAndMergeMultipleStyles([...InputLikeStyle], 'text', [LABEL]).filter((style) => style.name !== 'radius' && style.name !== 'background')
 ]
 
+export const InputFieldStyle = [
+  getStaticBackground(SURFACE_COLOR),
+  ...STYLING_FIELDS_CONTAINER_SEQUENCE,
+] as const;
+
 export const RatingStyle = [
   {
     name: "checked",
@@ -1146,6 +1160,8 @@ export const DateTimeStyle = [
   TEXT,
   MARGIN,
   PADDING,
+  BORDER_STYLE,
+  BORDER_WIDTH,
   ...ACCENT_VALIDATE,
 ] as const;
 
@@ -1466,6 +1482,7 @@ export const RichTextEditorStyle = [
 
 export type LabelStyleType = StyleConfigType<typeof LabelStyle>;
 export type InputLikeStyleType = StyleConfigType<typeof InputLikeStyle>;
+export type InputFieldStyleType = StyleConfigType<typeof InputFieldStyle>;
 export type ButtonStyleType = StyleConfigType<typeof ButtonStyle>;
 export type ToggleButtonStyleType = StyleConfigType<typeof ToggleButtonStyle>;
 export type TextStyleType = StyleConfigType<typeof TextStyle>;