diff --git a/packages/amis-ui/scss/_components.scss b/packages/amis-ui/scss/_components.scss
index 2d749b97b..c2e42d8b0 100644
--- a/packages/amis-ui/scss/_components.scss
+++ b/packages/amis-ui/scss/_components.scss
@@ -3537,6 +3537,103 @@
   --Toast-title-display: inline;
   --Toast-width: #{px2rem(400px)};
 
+  --Pick-base-top-border-color: var(--colors-neutral-line-8);
+  --Pick-base-top-border-width: var(--borders-width-2);
+  --Pick-base-top-border-style: var(--borders-style-2);
+  --Pick-base-right-border-color: var(--colors-neutral-line-8);
+  --Pick-base-right-border-width: var(--borders-width-2);
+  --Pick-base-right-border-style: var(--borders-style-2);
+  --Pick-base-bottom-border-color: var(--colors-neutral-line-8);
+  --Pick-base-bottom-border-width: var(--borders-width-2);
+  --Pick-base-bottom-border-style: var(--borders-style-2);
+  --Pick-base-left-border-color: var(--colors-neutral-line-8);
+  --Pick-base-left-border-width: var(--borders-width-2);
+  --Pick-base-left-border-style: var(--borders-style-2);
+  --Pick-base-top-right-border-radius: var(--borders-radius-3);
+  --Pick-base-top-left-border-radius: var(--borders-radius-3);
+  --Pick-base-bottom-right-border-radius: var(--borders-radius-3);
+  --Pick-base-bottom-left-border-radius: var(--borders-radius-3);
+  --Pick-base-placeholder-color: var(--colors-neutral-line-6);
+  --Pick-base-placeholder-fontSize: var(--fonts-size-7);
+  --Pick-base-placeholder-fontWeight: var(--fonts-weight-6);
+  --Pick-base-paddingTop: var(--sizes-size-3);
+  --Pick-base-paddingBottom: var(--sizes-size-3);
+  --Pick-base-paddingLeft: var(--sizes-size-6);
+  --Pick-base-paddingRight: var(--sizes-size-6);
+  --Pick-base-bgColor: var(--colors-neutral-line-11);
+  --Pick-base-value-color: var(--colors-other-5);
+  --Pick-base-value-fontSize: var(--fonts-size-8);
+  --Pick-base-value-fontWeight: var(--fonts-weight-6);
+  --Pick-base-value-top-border-color: var(--colors-other-7);
+  --Pick-base-value-top-border-width: var(--borders-width-2);
+  --Pick-base-value-top-border-style: var(--borders-style-2);
+  --Pick-base-value-right-border-color: var(--colors-other-7);
+  --Pick-base-value-right-border-width: var(--borders-width-2);
+  --Pick-base-value-right-border-style: var(--borders-style-2);
+  --Pick-base-value-bottom-border-color: var(--colors-other-7);
+  --Pick-base-value-bottom-border-width: var(--borders-width-2);
+  --Pick-base-value-bottom-border-style: var(--borders-style-2);
+  --Pick-base-value-left-border-color: var(--colors-other-7);
+  --Pick-base-value-left-border-width: var(--borders-width-2);
+  --Pick-base-value-left-border-style: var(--borders-style-2);
+  --Pick-base-value-bgColor: #cce5ff;
+  --Pick-base-top-right-border-radius: var(--borders-radius-3);
+  --Pick-base-top-left-border-radius: var(--borders-radius-3);
+  --Pick-base-bottom-right-border-radius: var(--borders-radius-3);
+  --Pick-base-bottom-left-border-radius: var(--borders-radius-3);
+  --Pick-base-icon-size: var(--sizes-size-9);
+  --Pick-base-icon-color: #84878c;
+  --Pick-base-value-hover-icon-color: #b3d7ff;
+  --Pick-base-value-icon-color: var(--colors-other-5);
+  --Picker-iconColor: var(--Pick-base-icon-color);
+  --Picker-onHover-iconColor: var(--icon-onHover-color);
+  --Pick-status-hover-top-border-color: var(--colors-other-5);
+  --Pick-status-hover-top-border-width: var(--borders-width-2);
+  --Pick-status-hover-top-border-style: var(--borders-style-2);
+  --Pick-status-hover-right-border-color: var(--colors-other-5);
+  --Pick-status-hover-right-border-width: var(--borders-width-2);
+  --Pick-status-hover-right-border-style: var(--borders-style-2);
+  --Pick-status-hover-bottom-border-color: var(--colors-other-5);
+  --Pick-status-hover-bottom-border-width: var(--borders-width-2);
+  --Pick-status-hover-bottom-border-style: var(--borders-style-2);
+  --Pick-status-hover-left-border-color: var(--colors-other-5);
+  --Pick-status-hover-left-border-width: var(--borders-width-2);
+  --Pick-status-hover-left-border-style: var(--borders-style-2);
+  --Pick-status-hover-bgColor: var(--colors-neutral-line-11);
+  --Pick-status-focus-top-border-color: var(--colors-other-7);
+  --Pick-status-focus-top-border-width: var(--borders-width-2);
+  --Pick-status-focus-top-border-style: var(--borders-style-2);
+  --Pick-status-focus-right-border-color: var(--colors-other-7);
+  --Pick-status-focus-right-border-width: var(--borders-width-2);
+  --Pick-status-focus-right-border-style: var(--borders-style-2);
+  --Pick-status-focus-bottom-border-color: var(--colors-other-7);
+  --Pick-status-focus-bottom-border-width: var(--borders-width-2);
+  --Pick-status-focus-bottom-border-style: var(--borders-style-2);
+  --Pick-status-focus-left-border-color: var(--colors-other-7);
+  --Pick-status-focus-left-border-width: var(--borders-width-2);
+  --Pick-status-focus-left-border-style: var(--borders-style-2);
+  --Pick-status-focus-shadow: var(--shadows-shadow-none);
+  --Pick-status-focus-bgColor: var(--colors-neutral-line-11);
+  --Pick-status-disabled-color: var(--colors-neutral-text-2);
+  --Pick-status-disabled-fontSize: var(--fonts-size-7);
+  --Pick-status-disabled-fontWeight: var(--fonts-weight-6);
+  --Pick-status-disabled-top-border-color: var(--colors-neutral-line-8);
+  --Pick-status-disabled-top-border-width: var(--borders-width-2);
+  --Pick-status-disabled-top-border-style: var(--borders-style-2);
+  --Pick-status-disabled-right-border-color: var(--colors-neutral-line-8);
+  --Pick-status-disabled-right-border-width: var(--borders-width-2);
+  --Pick-status-disabled-right-border-style: var(--borders-style-2);
+  --Pick-status-disabled-bottom-border-color: var(--colors-neutral-line-8);
+  --Pick-status-disabled-bottom-border-width: var(--borders-width-2);
+  --Pick-status-disabled-bottom-border-style: var(--borders-style-2);
+  --Pick-status-disabled-left-border-color: var(--colors-neutral-line-8);
+  --Pick-status-disabled-left-border-width: var(--borders-width-2);
+  --Pick-status-disabled-left-border-style: var(--borders-style-2);
+  --Pick-status-disabled-bgColor: var(--colors-neutral-text-10);
+  --Pick-status-disabled-color: var(--colors-neutral-line-6);
+  --Pick-status-disabled-fontSize: var(--fonts-size-7);
+  --Pick-status-disabled-fontWeight: var(--fonts-weight-6);
+
   --Status-base-fontSize: var(--fonts-size-9);
   --Status-base-icon-size: var(--sizes-size-8);
   --Status-base-text-margin: var(--sizes-size-3);
@@ -3610,7 +3707,7 @@
   --Timeline-visible-border-radius: var(--gap-xs);
   --Timeline-horizontal-content-margin-top: var(
     --Timeline-horizontal-top-size
-  );
+    );
   --TimelineItem--icon-radius: 50%;
   --TimelineItem--round-radius: 50%;
   --TimelineItem--content-radius: px2rem(2px);
diff --git a/packages/amis-ui/scss/components/_crud.scss b/packages/amis-ui/scss/components/_crud.scss
index 9146ace31..219d4ae82 100644
--- a/packages/amis-ui/scss/components/_crud.scss
+++ b/packages/amis-ui/scss/components/_crud.scss
@@ -25,11 +25,26 @@
       var(--Form-input-lineHeight) * var(--Form-input-fontSize) - #{px2rem(2px)}
     );
     display: inline-block;
-    font-size: var(--Form-selectValue-fontSize);
-    color: var(--Form-selectValue-color);
-    background: var(--Form-selectValue-bg);
-    border: px2rem(1px) solid var(--Form-selectValue-borderColor);
-    border-radius: 2px;
+    font-size: var(--Pick-base-value-fontSize);
+    color: var(--Pick-base-value-color);
+    font-weight: var(--Pick-base-value-fontWeight);
+    background: var(--Pick-base-value-bgColor);
+    border-width: var(--Pick-base-value-top-border-width)
+        var(--Pick-base-value-right-border-width)
+        var(--Pick-base-value-bottom-border-width)
+        var(--Pick-base-value-left-border-width);
+    border-style: var(--Pick-base-value-top-border-style)
+        var(--Pick-base-value-right-border-style)
+        var(--Pick-base-value-bottom-border-style)
+        var(--Pick-base-value-left-border-style);
+    border-color: var(--Pick-base-value-top-border-color)
+        var(--Pick-base-value-right-border-color)
+        var(--Pick-base-value-bottom-border-color)
+        var(--Pick-base-value-left-border-color);
+    border-radius: var(--Pick-base-top-left-border-radius)
+        var(--Pick-base-top-right-border-radius)
+        var(--Pick-base-bottom-right-border-radius)
+        var(--Pick-base-bottom-left-border-radius);
     margin-right: var(--gap-xs);
     margin-top: var(--gap-xs);
 
@@ -44,6 +59,7 @@
   }
 
   &-valueIcon {
+    color: var(--Pick-base-value-icon-color);
     cursor: pointer;
     border-right: px2rem(1px) solid var(--Form-selectValue-borderColor);
     padding: 1px 5px;
diff --git a/packages/amis-ui/scss/components/_crud2.scss b/packages/amis-ui/scss/components/_crud2.scss
index 72ae0aa2c..d2f4a5d4f 100644
--- a/packages/amis-ui/scss/components/_crud2.scss
+++ b/packages/amis-ui/scss/components/_crud2.scss
@@ -21,11 +21,26 @@
       var(--Form-input-lineHeight) * var(--Form-input-fontSize) - #{px2rem(2px)}
     );
     display: inline-block;
-    font-size: var(--Form-selectValue-fontSize);
-    color: var(--Form-selectValue-color);
-    background: var(--Form-selectValue-bg);
-    border: px2rem(1px) solid var(--Form-selectValue-borderColor);
-    border-radius: 2px;
+    font-size: var(--Pick-base-value-fontSize);
+    color: var(--Pick-base-value-color);
+    font-weight: var(--Pick-base-value-fontWeight);
+    background: var(--Pick-base-value-bgColor);
+    border-width: var(--Pick-base-value-top-border-width)
+        var(--Pick-base-value-right-border-width)
+        var(--Pick-base-value-bottom-border-width)
+        var(--Pick-base-value-left-border-width);
+    border-style: var(--Pick-base-value-top-border-style)
+        var(--Pick-base-value-right-border-style)
+        var(--Pick-base-value-bottom-border-style)
+        var(--Pick-base-value-left-border-style);
+    border-color: var(--Pick-base-value-top-border-color)
+        var(--Pick-base-value-right-border-color)
+        var(--Pick-base-value-bottom-border-color)
+        var(--Pick-base-value-left-border-color);
+    border-radius: var(--Pick-base-top-left-border-radius)
+        var(--Pick-base-top-right-border-radius)
+        var(--Pick-base-bottom-right-border-radius)
+        var(--Pick-base-bottom-left-border-radius);
     margin-right: var(--gap-xs);
     margin-top: var(--gap-xs);
 
@@ -40,6 +55,7 @@
   }
 
   &-valueIcon {
+    color: var(--Pick-base-value-icon-color);
     cursor: pointer;
     border-right: px2rem(1px) solid var(--Form-selectValue-borderColor);
     padding: 1px 5px;
diff --git a/packages/amis-ui/scss/components/form/_picker.scss b/packages/amis-ui/scss/components/form/_picker.scss
index 96d16491c..4ab62a200 100644
--- a/packages/amis-ui/scss/components/form/_picker.scss
+++ b/packages/amis-ui/scss/components/form/_picker.scss
@@ -2,24 +2,80 @@
   @include input-text();
   outline: none;
 
-  &.is-focus > &-input {
-    border-color: var(--Form-input-onFocused-borderColor);
-    box-shadow: var(--Form-input-boxShadow);
-    background: var(--Form-input-onFocused-bg);
+  &-input:hover {
+    background: var(--Pick-status-hover-bgColor);
+    border-width: var(--Pick-status-hover-top-border-width)
+      var(--Pick-status-hover-right-border-width)
+      var(--Pick-status-hover-bottom-border-width)
+      var(--Pick-status-hover-left-border-width);
+    border-style: var(--Pick-status-hover-top-border-style)
+      var(--Pick-status-hover-right-border-style)
+      var(--Pick-status-hover-bottom-border-style)
+      var(--Pick-status-hover-left-border-style);
+    border-color: var(--Pick-status-hover-top-border-color)
+      var(--Pick-status-hover-right-border-color)
+      var(--Pick-status-hover-bottom-border-color)
+      var(--Pick-status-hover-left-border-color);
+  }
+
+  &.is-focused {
+    & > .#{$ns}Picker-input {
+      box-shadow: var(--Form-input-boxShadow);
+      background-color: var(--Pick-status-focus-bgColor);
+      border-width: var(--Pick-status-focus-top-border-width)
+        var(--Pick-status-focus-right-border-width)
+        var(--Pick-status-focus-bottom-border-width)
+        var(--Pick-status-focus-left-border-width);
+      border-style: var(--Pick-status-focus-top-border-style)
+        var(--Pick-status-focus-right-border-style)
+        var(--Pick-status-focus-bottom-border-style)
+        var(--Pick-status-focus-left-border-style);
+      border-color: var(--Pick-status-focus-top-border-color)
+        var(--Pick-status-focus-right-border-color)
+        var(--Pick-status-focus-bottom-border-color)
+        var(--Pick-status-focus-left-border-color);
+    }
   }
 
   &.is-disabled {
     pointer-events: none;
     opacity: var(--Button-onDisabled-opacity);
+
+    .#{$ns}Picker-placeholder {
+      color: var(--Pick-status-disabled-color);
+      font-size: var(--Pick-status-disabled-fontSize);
+      font-weight: var(--Pick-status-disabled-fontWeight);
+    }
+    & > .#{$ns}Picker-input {
+      color: var(--Pick-status-disabled-color);
+      font-size: var(--Pick-status-disabled-fontSize);
+      font-weight: var(--Pick-status-disabled-fontWeight);
+      background-color: var(--Pick-status-disabled-bgColor);
+      border-width: var(--Pick-status-disabled-top-border-width)
+        var(--Pick-status-disabled-right-border-width)
+        var(--Pick-status-disabled-bottom-border-width)
+        var(--Pick-status-disabled-left-border-width);
+      border-style: var(--Pick-status-disabled-top-border-style)
+        var(--Pick-status-disabled-right-border-style)
+        var(--Pick-status-disabled-bottom-border-style)
+        var(--Pick-status-disabled-left-border-style);
+      border-color: var(--Pick-status-disabled-top-border-color)
+        var(--Pick-status-disabled-right-border-color)
+        var(--Pick-status-disabled-bottom-border-color)
+        var(--Pick-status-disabled-left-border-color);
+    }
   }
 
   &-placeholder {
-    color: var(--Form-input-placeholderColor);
+    color: var(--Pick-base-placeholder-color);
+    font-size: var(--Pick-base-placeholder-fontSize);
+    font-weight: var(--Pick-base-placeholder-fontWeight);
     user-select: none;
     position: absolute;
     // margin-top: 2 * var(--Form-input-borderWidth);
     line-height: var(--Form-input-lineHeight);
-    padding: var(--Form-input-paddingY) var(--Form-input-paddingX);
+    padding: var(--Pick-base-paddingTop) var(--Pick-base-paddingRight)
+      var(--Pick-base-paddingBottom) var(--Pick-base-paddingLeft);
   }
 
   &-input {
@@ -27,6 +83,16 @@
     height: auto;
     padding: 0;
     flex-wrap: nowrap;
+    background-color: var(--Pick-base-bgColor);
+    border-width: var(--Pick-base-top-border-width)
+      var(--Pick-base-right-border-width) var(--Pick-base-bottom-border-width)
+      var(--Pick-base-left-border-width);
+    border-style: var(--Pick-base-top-border-style)
+      var(--Pick-base-right-border-style) var(--Pick-base-bottom-border-style)
+      var(--Pick-base-left-border-style);
+    border-color: var(--Pick-base-top-border-color)
+      var(--Pick-base-right-border-color) var(--Pick-base-bottom-border-color)
+      var(--Pick-base-left-border-color);
   }
 
   .#{$ns}Picker-values {
@@ -58,22 +124,38 @@
       var(--Form-input-lineHeight) * var(--Form-input-fontSize) - #{px2rem(2px)}
     );
     display: inline-block;
-    font-size: var(--Form-selectValue-fontSize);
-    color: var(--Form-selectValue-color);
-    background: var(--Form-selectValue-bg);
-    border: px2rem(1px) solid var(--Form-selectValue-borderColor);
-    border-radius: 2px;
+    font-size: var(--Pick-base-value-fontSize);
+    color: var(--Pick-base-value-color);
+    font-weight: var(--Pick-base-value-fontWeight);
+    background: var(--Pick-base-value-bgColor);
+    border-width: var(--Pick-base-value-top-border-width)
+      var(--Pick-base-value-right-border-width)
+      var(--Pick-base-value-bottom-border-width)
+      var(--Pick-base-value-left-border-width);
+    border-style: var(--Pick-base-value-top-border-style)
+      var(--Pick-base-value-right-border-style)
+      var(--Pick-base-value-bottom-border-style)
+      var(--Pick-base-value-left-border-style);
+    border-color: var(--Pick-base-value-top-border-color)
+      var(--Pick-base-value-right-border-color)
+      var(--Pick-base-value-bottom-border-color)
+      var(--Pick-base-value-left-border-color);
+    border-radius: var(--Pick-base-top-left-border-radius)
+      var(--Pick-base-top-right-border-radius)
+      var(--Pick-base-bottom-right-border-radius)
+      var(--Pick-base-bottom-left-border-radius);
     margin-right: var(--gap-xs);
     margin-bottom: var(--gap-xs);
   }
 
   .#{$ns}Picker-valueIcon {
+    color: var(--Pick-base-value-icon-color);
     cursor: pointer;
     border-right: px2rem(1px) solid var(--Form-selectValue-borderColor);
     padding: 1px 5px;
 
     &:hover {
-      background: var(--Form-selectValue-onHover-bg);
+      background: var(--Pick-base-value-hover-icon-color);
     }
   }
 
@@ -92,6 +174,11 @@
       top: 0;
     }
 
+    & > svg {
+      width: var(--Pick-base-icon-size);
+      height: var(--Pick-base-icon-size);
+    }
+
     &:hover {
       color: var(--Picker-onHover-iconColor);
     }