diff --git a/examples/docs/zh-CN/time-picker.md b/examples/docs/zh-CN/time-picker.md
index 8bf4f2a84..656cca039 100644
--- a/examples/docs/zh-CN/time-picker.md
+++ b/examples/docs/zh-CN/time-picker.md
@@ -137,7 +137,7 @@
   export default {
     data() {
       return {
-        value1: '14:30',
+        value1: '',
         value2: new Date(2016, 9, 10, 18, 40),
         value3: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
         startTime: '',
diff --git a/packages/date-picker/src/panel/time-range.vue b/packages/date-picker/src/panel/time-range.vue
index a2917f1d4..df4d82b85 100644
--- a/packages/date-picker/src/panel/time-range.vue
+++ b/packages/date-picker/src/panel/time-range.vue
@@ -10,7 +10,9 @@
       <div class="el-time-range-picker__content">
         <div class="el-time-range-picker__cell">
           <div class="el-time-range-picker__header">{{ t('el.datepicker.startTime') }}</div>
-          <div class="el-time-range-picker__body el-time-panel__content">
+          <div
+            :class="{ 'has-seconds': showSeconds }"
+            class="el-time-range-picker__body el-time-panel__content">
             <time-spinner
               ref="minSpinner"
               :show-seconds="showSeconds"
@@ -24,7 +26,9 @@
         </div>
         <div class="el-time-range-picker__cell">
           <div class="el-time-range-picker__header">{{ t('el.datepicker.endTime') }}</div>
-          <div class="el-time-range-picker__body el-time-panel__content">
+          <div
+            :class="{ 'has-seconds': showSeconds }"
+            class="el-time-range-picker__body el-time-panel__content">
             <time-spinner
               ref="maxSpinner"
               :show-seconds="showSeconds"
diff --git a/packages/date-picker/src/panel/time.vue b/packages/date-picker/src/panel/time.vue
index 4b57848bb..0674498c3 100644
--- a/packages/date-picker/src/panel/time.vue
+++ b/packages/date-picker/src/panel/time.vue
@@ -3,9 +3,8 @@
     <div
       v-show="currentVisible"
       :style="{width: width + 'px'}"
-      :class="{ 'has-seconds': showSeconds }"
       class="el-time-panel">
-      <div class="el-time-panel__content">
+      <div class="el-time-panel__content" :class="{ 'has-seconds': showSeconds }">
         <time-spinner
           ref="spinner"
           @change="handleChange"
diff --git a/packages/theme-default/src/date-picker/time-picker.css b/packages/theme-default/src/date-picker/time-picker.css
index 9fc56e388..ee0b288ad 100644
--- a/packages/theme-default/src/date-picker/time-picker.css
+++ b/packages/theme-default/src/date-picker/time-picker.css
@@ -13,16 +13,6 @@
     z-index: var(--index-top);
     user-select: none;
 
-    &.has-seconds {
-      .el-time-panel__content::after {
-        left: calc(100% / 3 * 2);
-      }
-
-      .el-time-panel__content::before {
-        padding-left: calc(100% / 3);
-      }
-    }
-
     @e content {
       font-size: 0;
       position: relative;
@@ -55,6 +45,16 @@
         padding-left: 50%;
         margin-right: -2px;
       }
+
+      &.has-seconds {
+        &::after {
+          left: calc(100% / 3 * 2);
+        }
+
+        &::before {
+          padding-left: calc(100% / 3);
+        }
+      }
     }
 
     @e footer {