diff --git a/apps/common/main/lib/component/HSBColorPicker.js b/apps/common/main/lib/component/HSBColorPicker.js
index 316d862c9..d6f1d4863 100644
--- a/apps/common/main/lib/component/HSBColorPicker.js
+++ b/apps/common/main/lib/component/HSBColorPicker.js
@@ -55,7 +55,8 @@ define([
                     '<% } %>'+
                     '<div>'+
                         '<div class="cnt-hb img-colorpicker">'+
-                            '<div class="cnt-hb-arrow img-colorpicker"></div>'+
+                            //'<div class="cnt-hb-arrow img-colorpicker"></div>'+
+                            '<div class="cnt-hb-arrow"></div>'+
                         '</div>'+
                         '<% if (this.changeSaturation) { %>'+
                             '<div class="cnt-root">'+
@@ -106,6 +107,7 @@ define([
                 refreshUI();
 
                 me.trigger('changecolor', me, me.color);
+
             };
 
             var refreshUI = function(){
@@ -128,6 +130,7 @@ define([
                     arrowSatBrightness.css('left', saturationVal + '%');
                     arrowSatBrightness.css('top', 100 - brightnessVal + '%');
                     arrowHue.css('top', parseInt(hueVal * 100 / 360.0) + '%');
+                    arrowSatBrightness.css({'background-color' : me.color});
                 }
             };
 
diff --git a/apps/common/main/resources/less/hsb-colorpicker.less b/apps/common/main/resources/less/hsb-colorpicker.less
index 2a4cd4d8f..31467fe95 100644
--- a/apps/common/main/resources/less/hsb-colorpicker.less
+++ b/apps/common/main/resources/less/hsb-colorpicker.less
@@ -32,7 +32,7 @@
 
     .cnt-hb {
         display: inline-block;
-        overflow: hidden;
+        //overflow: hidden;
         width: 196px;
         height: 196px;
         position: relative;
@@ -54,12 +54,24 @@
     }
 
     .cnt-hb-arrow {
+        display:  inline-block;
         width: 12px;
         height: 12px;
         margin: -6px;
-        margin-left: calc(-6*@scaled-one-px-value);
         position: absolute;
-        background-position: 0 -196px;
+        border: @scaled-one-px-value-ie solid #000;
+        border: @scaled-one-px-value solid #000;
+        &:after{
+            content: ' ';
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            border: @scaled-one-px-value-ie solid #fff;
+            border: @scaled-one-px-value solid #fff;
+        }
+
+
+       // background-position: 0 -196px;
     }
 
     .cnt-sat-arrow {