diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss
index e4cc99788c..57b3403018 100644
--- a/packages/theme-chalk/src/common/var.scss
+++ b/packages/theme-chalk/src/common/var.scss
@@ -461,9 +461,9 @@ $input: () !default;
 $input: map.merge(
   (
     'text-color': var(--el-text-color-regular),
-    'border': 0 0 0 1px var(--el-input-border-color) inset,
-    'hover-border': 0 0 0 1px var(--el-input-hover-border-color) inset,
-    'focus-border': 0 0 0 1px var(--el-input-focus-border-color) inset,
+    'border': var(--el-border-base),
+    'hover-border': var(--el-border-color-hover),
+    'focus-border': var(--el-color-primary),
     'transparent-border': 0 0 0 1px transparent inset,
     'border-color': var(--el-border-color-base),
     'border-radius': var(--el-border-radius-base),
diff --git a/packages/theme-chalk/src/date-picker/picker.scss b/packages/theme-chalk/src/date-picker/picker.scss
index 8b0b8919c6..6d68b3f93f 100644
--- a/packages/theme-chalk/src/date-picker/picker.scss
+++ b/packages/theme-chalk/src/date-picker/picker.scss
@@ -18,7 +18,7 @@
 
 @include b(date-editor) {
   @include set-component-css-var('date-editor', $date-editor);
-
+  @include set-component-css-var('input', $input);
   position: relative;
   display: inline-block;
   text-align: left;
@@ -144,10 +144,9 @@
   }
 
   @include when(active) {
-    border-color: var(--el-color-primary);
-
+    @include inset-input-border(var(--el-input-focus-border-color));
     &:hover {
-      border-color: var(--el-color-primary);
+      @include inset-input-border(var(--el-input-focus-border-color));
     }
   }
 
diff --git a/packages/theme-chalk/src/input.scss b/packages/theme-chalk/src/input.scss
index 9119454adc..db101775b6 100644
--- a/packages/theme-chalk/src/input.scss
+++ b/packages/theme-chalk/src/input.scss
@@ -52,7 +52,9 @@
     color: var(--el-input-text-color, map.get($input, 'text-color'));
     background-color: var(--el-input-bg-color, map.get($input, 'bg-color'));
     background-image: none;
-    box-shadow: var(--el-input-border, map.get($input, 'border'));
+    @include inset-input-border(
+      var(--el-input-border-color, map.get($input, 'border-color'))
+    );
     border-radius: var(
       --el-input-border-radius,
       map.get($input, 'border-radius')
@@ -67,12 +69,12 @@
     }
 
     &:hover {
-      box-shadow: var(--el-input-hover-border);
+      @include inset-input-border(var(--el-input-hover-border-color));
     }
 
     &:focus {
       outline: none;
-      box-shadow: var(--el-input-focus-border);
+      @include inset-input-border(var(--el-input-focus-border-color));
     }
   }
 
@@ -166,7 +168,9 @@
     padding: 0 map.get($input-padding-horizontal, 'default')-$border-width-base;
     transition: var(--el-transition-box-shadow);
     width: 100%;
-    box-shadow: var(--el-input-border, map.get($input, 'border'));
+    @include inset-input-border(
+      var(--el-input-border-color, map.get($input, 'border-color'))
+    );
 
     &::placeholder {
       color: var(
@@ -176,12 +180,12 @@
     }
 
     &:hover {
-      box-shadow: var(--el-input-hover-border);
+      @include inset-input-border(var(--el-input-hover-border-color));
     }
 
     &:focus {
       outline: none;
-      box-shadow: var(--el-input-focus-border);
+      @include inset-input-border(var(--el-input-focus-border-color));
     }
   }