diff --git a/src/index.scss b/src/index.scss
index 4b69557e..62da1006 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -39,6 +39,9 @@ $primary-color: #1284e7;
     .mx-clear-wrapper {
       display: block;
     }
+    .mx-clear-wrapper + .mx-input-append {
+      display: none;
+    }
   }
 }
 
@@ -72,8 +75,6 @@ $primary-color: #1284e7;
   width: 30px;
   height: 100%;
   padding: 6px;
-  background-color: #fff;
-  background-clip: content-box;
 }
 
 .mx-input-icon {
diff --git a/src/index.vue b/src/index.vue
index e58b52d6..58f2f958 100644
--- a/src/index.vue
+++ b/src/index.vue
@@ -27,6 +27,14 @@
         @blur="handleBlur"
         @input="handleInput"
         @change="handleChange">
+      <span
+        v-if="showClearIcon"
+        class="mx-input-append mx-clear-wrapper"
+        @click.stop="clearDate">
+        <slot name="mx-clear-icon">
+          <i class="mx-input-icon mx-clear-icon"></i>
+        </slot>
+      </span>
       <span class="mx-input-append">
         <slot name="calendar-icon">
           <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 200 200" class="mx-calendar-icon">
@@ -38,14 +46,6 @@
           </svg>
         </slot>
       </span>
-      <span
-        v-if="showClearIcon"
-        class="mx-input-append mx-clear-wrapper"
-        @click.stop="clearDate">
-        <slot name="mx-clear-icon">
-          <i class="mx-input-icon mx-clear-icon"></i>
-        </slot>
-      </span>
     </div>
     <div class="mx-datepicker-popup"
       :style="innerPopupStyle"