diff --git a/src/date-picker/src/DatePicker.vue b/src/date-picker/src/DatePicker.vue
index dd2ed6997..3a6432328 100644
--- a/src/date-picker/src/DatePicker.vue
+++ b/src/date-picker/src/DatePicker.vue
@@ -1,5 +1,6 @@
 <template>
   <div
+    ref="triggerRef"
     :class="{
       [`n-${mergedTheme}-theme`]: mergedTheme,
       'n-date-picker--disabled': disabled,
@@ -8,72 +9,68 @@
       'n-date-picker--start-invalid': isStartValueInvalid,
       'n-date-picker--end-invalid': isEndValueInvalid
     }"
+    class="n-date-picker"
+    @keydown="handleKeyDown"
   >
     <v-binder>
       <v-target>
-        <div
-          ref="triggerRef"
-          class="n-date-picker"
-          @keydown="handleKeyDown"
+        <n-input
+          v-if="isRange"
+          ref="inputRef"
+          :bordered="mergedBordered"
+          :size="mergedSize"
+          :theme="mergedTheme"
+          passively-activated
+          :disabled="disabled"
+          :value="[displayStartTime, displayEndTime]"
+          :placeholder="[localizedStartPlaceholder, localizedEndPlaceholder]"
+          :readonly="disabled ? 'disabled' : false"
+          :separator="localizedSeperator"
+          :force-focus="active"
+          :clearable="clearable"
+          pair
+          deactivate-on-enter
+          @clear="handleClear"
+          @click="handleActivatorClick"
+          @activate="handleInputActivate"
+          @focus="handleInputFocus"
+          @blur="handleInputBlur"
+          @deactivate="handleRangeInputDeactivate"
+          @input="handleRangeInput"
         >
-          <n-input
-            v-if="isRange"
-            ref="inputRef"
-            :bordered="mergedBordered"
-            :size="mergedSize"
-            :theme="mergedTheme"
-            passively-activated
-            :disabled="disabled"
-            :value="[displayStartTime, displayEndTime]"
-            :placeholder="[localizedStartPlaceholder, localizedEndPlaceholder]"
-            :readonly="disabled ? 'disabled' : false"
-            :separator="localizedSeperator"
-            :force-focus="active"
-            :clearable="clearable"
-            pair
-            deactivate-on-enter
-            @clear="handleClear"
-            @click="handleActivatorClick"
-            @activate="handleInputActivate"
-            @focus="handleInputFocus"
-            @blur="handleInputBlur"
-            @deactivate="handleRangeInputDeactivate"
-            @input="handleRangeInput"
-          >
-            <template #suffix>
-              <n-icon>
-                <calendar-icon />
-              </n-icon>
-            </template>
-          </n-input>
-          <n-input
-            v-else
-            ref="inputRef"
-            v-model:value="displayTime"
-            :theme="mergedTheme"
-            passively-activated
-            :size="mergedSize"
-            :force-focus="active"
-            :disabled="disabled"
-            :placeholder="localizedPlacehoder"
-            :readonly="disabled ? 'disabled' : false"
-            :clearable="clearable"
-            deactivate-on-enter
-            @click="handleActivatorClick"
-            @focus="handleInputFocus"
-            @blur="handleInputBlur"
-            @activate="handleInputActivate"
-            @deactivate="handleInputDeactivate"
-            @input="handleTimeInput"
-            @clear="handleClear"
-          >
-            <template #suffix>
-              <n-icon>
-                <calendar-icon />
-              </n-icon>
-            </template>
-          </n-input>
-        </div>
+          <template #suffix>
+            <n-icon>
+              <calendar-icon />
+            </n-icon>
+          </template>
+        </n-input>
+        <n-input
+          v-else
+          ref="inputRef"
+          v-model:value="displayTime"
+          :theme="mergedTheme"
+          passively-activated
+          :size="mergedSize"
+          :force-focus="active"
+          :disabled="disabled"
+          :placeholder="localizedPlacehoder"
+          :readonly="disabled ? 'disabled' : false"
+          :clearable="clearable"
+          deactivate-on-enter
+          @click="handleActivatorClick"
+          @focus="handleInputFocus"
+          @blur="handleInputBlur"
+          @activate="handleInputActivate"
+          @deactivate="handleInputDeactivate"
+          @input="handleTimeInput"
+          @clear="handleClear"
+        >
+          <template #suffix>
+            <n-icon>
+              <calendar-icon />
+            </n-icon>
+          </template>
+        </n-input>
       </v-target>
       <v-follower
         :show="active"
diff --git a/src/input/src/styles/themed-base.cssr.js b/src/input/src/styles/themed-base.cssr.js
index 59139db96..dcb36b689 100644
--- a/src/input/src/styles/themed-base.cssr.js
+++ b/src/input/src/styles/themed-base.cssr.js
@@ -65,7 +65,7 @@ export default c([
         cursor: 'not-allowed',
         backgroundColor: colorDisabled
       }, [
-        cE('state-border', {
+        cE('border', {
           border: borderDisabled
         }),
         cE('input, textarea', {
diff --git a/src/input/src/styles/themed-size.cssr.js b/src/input/src/styles/themed-size.cssr.js
index 1753b9e83..506b6de7b 100644
--- a/src/input/src/styles/themed-size.cssr.js
+++ b/src/input/src/styles/themed-size.cssr.js
@@ -97,7 +97,7 @@ export default c([
               left: paddingLeft,
               right: paddingRight
             }),
-            cE('box-shadow, border', {
+            cE('box-shadow, border, state-border', {
               borderRadius: roundBorderRadius
             })
           ])