diff --git a/components/input/Input.tsx b/components/input/Input.tsx
index 399fe45c09..e5dbbd44ed 100644
--- a/components/input/Input.tsx
+++ b/components/input/Input.tsx
@@ -257,6 +257,8 @@ class Input extends React.Component<InputProps, any> {
     const affixWrapperCls = classNames(props.className, `${prefixCls}-affix-wrapper`, {
       [`${prefixCls}-affix-wrapper-sm`]: props.size === 'small',
       [`${prefixCls}-affix-wrapper-lg`]: props.size === 'large',
+      [`${prefixCls}-affix-wrapper-with-clear-btn`]:
+        props.suffix && props.allowClear && this.state.value,
     });
     return (
       <span className={affixWrapperCls} style={props.style}>
diff --git a/components/input/style/mixin.less b/components/input/style/mixin.less
index f04b8c744d..827a8bfc52 100644
--- a/components/input/style/mixin.less
+++ b/components/input/style/mixin.less
@@ -2,6 +2,7 @@
 @import '../../style/mixins/index';
 
 @input-affix-width: 19px;
+@input-affix-with-clear-btn-width: 38px;
 
 // size mixins for input
 .input-lg() {
@@ -371,14 +372,22 @@
   .@{inputClass}-prefix,
   .@{inputClass}-suffix {
     position: absolute;
-    top: 50%;
+    top: 0;
     z-index: 2;
     color: @input-color;
     line-height: 0;
-    transform: translateY(-50%);
+    height: 100%;
+    box-sizing: border-box;
+    padding: @input-padding-vertical-base + @border-width-base 0;
     :not(.anticon) {
       line-height: @line-height-base;
     }
+    .anticon {
+      position: relative;
+      vertical-align: top;
+      top: 50%;
+      transform: translateY(-50%);
+    }
   }
 
   .@{inputClass}-prefix {
@@ -396,4 +405,7 @@
   .@{inputClass}:not(:last-child) {
     padding-right: @input-padding-horizontal-base + @input-affix-width;
   }
+  &.@{inputClass}-affix-wrapper-with-clear-btn .@{inputClass}:not(:last-child) {
+    padding-right: @input-padding-horizontal-base + @input-affix-with-clear-btn-width;
+  }
 }