diff --git a/src/components/color-picker/color-picker.vue b/src/components/color-picker/color-picker.vue
index 7a62808..8c2574b 100644
--- a/src/components/color-picker/color-picker.vue
+++ b/src/components/color-picker/color-picker.vue
@@ -68,6 +68,7 @@
             wrapClasses () {
                 return [
                     `${prefixCls}-rel`,
+                    `${prefixCls}-${this.size}`,
                     `${inputPrefixCls}-wrapper`,
                     `${inputPrefixCls}-wrapper-${this.size}`
                 ];
diff --git a/src/styles/components/color-picker.less b/src/styles/components/color-picker.less
index 8c0991f..ab44195 100644
--- a/src/styles/components/color-picker.less
+++ b/src/styles/components/color-picker.less
@@ -5,8 +5,20 @@
         line-height: 0;
     }
     &-color{
-        width: 20px;
-        height: 100%;
+        width: 18px;
+        height: 18px;
         border: 1px solid @text-color;
+        position: relative;
+        top: 2px;
+    }
+    &-large &-color{
+        width: 20px;
+        height: 20px;
+        top: 1px;
+    }
+    &-small &-color{
+        width: 14px;
+        height: 14px;
+        top: 3px;
     }
 }
\ No newline at end of file
--
libgit2 0.21.4