diff --git a/dist/base.css b/dist/base.css
index b1b90adeb..7097b4637 100644
--- a/dist/base.css
+++ b/dist/base.css
@@ -8,9 +8,9 @@
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
   border-radius: 2px;
-  box-shadow: 0px 0px 2px 1px #d4dadd inset;
-  -webkit-box-shadow: 0px 0px 2px 1px #d4dadd inset;
-  -moz-box-shadow: 0px 0px 2px 1px #d4dadd inset;
+  box-shadow: 0px 0px 2px 1px #d0d4da inset;
+  -webkit-box-shadow: 0px 0px 2px 1px #d0d4da inset;
+  -moz-box-shadow: 0px 0px 2px 1px #d0d4da inset;
 }
 .bi-color-picker-button .color-picker-button-mask {
   border: 1px solid #232e40;
@@ -784,17 +784,20 @@ li.CodeMirror-hint-active {
 .bi-rich-editor-text-toolbar .text-toolbar-button {
   font-size: 16px;
 }
+.bi-segment-button {
+  color: #3685f2;
+}
 .bi-segment > .center-element {
   overflow: hidden;
   overflow-x: hidden;
   overflow-y: hidden;
   background: #ffffff;
-  border-right: 1px solid #e8eaed;
-  border-top: 1px solid #e8eaed;
-  border-bottom: 1px solid #e8eaed;
+  border-right: 1px solid #3685f2;
+  border-top: 1px solid #3685f2;
+  border-bottom: 1px solid #3685f2;
 }
 .bi-segment > .first-element {
-  border-left: 1px solid #e8eaed;
+  border-left: 1px solid #3685f2;
   -webkit-border-radius: 6px 0px 0px 6px;
   -moz-border-radius: 6px 0px 0px 6px;
   border-radius: 6px 0px 0px 6px;
@@ -804,6 +807,10 @@ li.CodeMirror-hint-active {
   -moz-border-radius: 0px 6px 6px 0px;
   border-radius: 0px 6px 6px 0px;
 }
+.bi-segment.disabled > .center-element,
+.bi-segment.disabled > .first-element {
+  border-color: #F0F3F7;
+}
 .bi-theme-dark .bi-segment > .center-element {
   overflow: hidden;
   overflow-x: hidden;
diff --git a/dist/case.js b/dist/case.js
index 2d5456197..64f60e6cd 100644
--- a/dist/case.js
+++ b/dist/case.js
@@ -11775,7 +11775,7 @@ BI.SegmentButton = BI.inherit(BI.BasicButton, {
     _defaultConfig: function () {
         var conf = BI.SegmentButton.superclass._defaultConfig.apply(this, arguments);
         return BI.extend(conf, {
-            baseCls: (conf.baseCls || "") + " bi-segment-button bi-list-item-active",
+            baseCls: (conf.baseCls || "") + " bi-segment-button bi-list-item-select",
             shadow: true,
             readonly: true,
             hgap: 5
diff --git a/dist/core.css b/dist/core.css
index 35d5804d0..8e34f8b8e 100644
--- a/dist/core.css
+++ b/dist/core.css
@@ -1081,30 +1081,41 @@ textarea {
 .bi-list-item-select.button-warning.active.bi-high-light-border {
   border-color: #e85050;
 }
-.bi-list-item-select.disabled,
-.bi-list-item-select.disabled:hover,
-.bi-list-item-select.disabled:active {
+.bi-list-item-select.disabled {
   color: #9ea6b2 !important;
   background-color: transparent !important;
 }
-.bi-list-item-select.disabled .bi-input,
-.bi-list-item-select.disabled:hover .bi-input,
-.bi-list-item-select.disabled:active .bi-input {
+.bi-list-item-select.disabled .bi-input {
   color: #9ea6b2 !important;
 }
-.bi-list-item-select.disabled .bi-textarea,
-.bi-list-item-select.disabled:hover .bi-textarea,
-.bi-list-item-select.disabled:active .bi-textarea {
+.bi-list-item-select.disabled .bi-textarea {
   color: #9ea6b2 !important;
 }
-.bi-list-item-select.disabled .bi-high-light,
-.bi-list-item-select.disabled:hover .bi-high-light,
-.bi-list-item-select.disabled:active .bi-high-light {
+.bi-list-item-select.disabled .bi-high-light {
   color: #9ea6b2 !important;
 }
-.bi-list-item-select.disabled.bi-high-light-border,
-.bi-list-item-select.disabled:hover.bi-high-light-border,
-.bi-list-item-select.disabled:active.bi-high-light-border {
+.bi-list-item-select.disabled.bi-high-light-border {
+  border-color: #F0F3F7;
+}
+.bi-list-item-select.disabled.hover,
+.bi-list-item-select.disabled.active {
+  color: #ffffff !important;
+  background-color: #d0d4da !important;
+}
+.bi-list-item-select.disabled.hover .bi-input,
+.bi-list-item-select.disabled.active .bi-input {
+  color: #ffffff !important;
+}
+.bi-list-item-select.disabled.hover .bi-textarea,
+.bi-list-item-select.disabled.active .bi-textarea {
+  color: #ffffff !important;
+}
+.bi-list-item-select.disabled.hover .bi-high-light,
+.bi-list-item-select.disabled.active .bi-high-light {
+  color: #9ea6b2 !important;
+}
+.bi-list-item-select.disabled.hover.bi-high-light-border,
+.bi-list-item-select.disabled.active.bi-high-light-border {
   border-color: #F0F3F7;
 }
 .bi-list-item-select2:hover,
@@ -1113,7 +1124,7 @@ textarea {
 }
 .bi-list-item-select2:active,
 .bi-list-item-select2.active {
-  color: #3685f2;
+  color: #ffffff;
   background-color: #f7f8fa;
 }
 .bi-list-item-select2:active .bi-input,
@@ -1124,6 +1135,10 @@ textarea {
 .bi-list-item-select2.active .bi-textarea {
   color: #3685f2;
 }
+.bi-list-item-select2:active .bi-high-light,
+.bi-list-item-select2.active .bi-high-light {
+  color: #ffffff;
+}
 .bi-theme-dark .bi-list-item-select:hover,
 .bi-theme-dark .bi-list-item-select.hover {
   color: #ffffff;
diff --git a/dist/core_without_normalize.css b/dist/core_without_normalize.css
index a13ba9999..514b6da96 100644
--- a/dist/core_without_normalize.css
+++ b/dist/core_without_normalize.css
@@ -803,30 +803,41 @@ textarea {
 .bi-list-item-select.button-warning.active.bi-high-light-border {
   border-color: #e85050;
 }
-.bi-list-item-select.disabled,
-.bi-list-item-select.disabled:hover,
-.bi-list-item-select.disabled:active {
+.bi-list-item-select.disabled {
   color: #9ea6b2 !important;
   background-color: transparent !important;
 }
-.bi-list-item-select.disabled .bi-input,
-.bi-list-item-select.disabled:hover .bi-input,
-.bi-list-item-select.disabled:active .bi-input {
+.bi-list-item-select.disabled .bi-input {
   color: #9ea6b2 !important;
 }
-.bi-list-item-select.disabled .bi-textarea,
-.bi-list-item-select.disabled:hover .bi-textarea,
-.bi-list-item-select.disabled:active .bi-textarea {
+.bi-list-item-select.disabled .bi-textarea {
   color: #9ea6b2 !important;
 }
-.bi-list-item-select.disabled .bi-high-light,
-.bi-list-item-select.disabled:hover .bi-high-light,
-.bi-list-item-select.disabled:active .bi-high-light {
+.bi-list-item-select.disabled .bi-high-light {
   color: #9ea6b2 !important;
 }
-.bi-list-item-select.disabled.bi-high-light-border,
-.bi-list-item-select.disabled:hover.bi-high-light-border,
-.bi-list-item-select.disabled:active.bi-high-light-border {
+.bi-list-item-select.disabled.bi-high-light-border {
+  border-color: #F0F3F7;
+}
+.bi-list-item-select.disabled.hover,
+.bi-list-item-select.disabled.active {
+  color: #ffffff !important;
+  background-color: #d0d4da !important;
+}
+.bi-list-item-select.disabled.hover .bi-input,
+.bi-list-item-select.disabled.active .bi-input {
+  color: #ffffff !important;
+}
+.bi-list-item-select.disabled.hover .bi-textarea,
+.bi-list-item-select.disabled.active .bi-textarea {
+  color: #ffffff !important;
+}
+.bi-list-item-select.disabled.hover .bi-high-light,
+.bi-list-item-select.disabled.active .bi-high-light {
+  color: #9ea6b2 !important;
+}
+.bi-list-item-select.disabled.hover.bi-high-light-border,
+.bi-list-item-select.disabled.active.bi-high-light-border {
   border-color: #F0F3F7;
 }
 .bi-list-item-select2:hover,
@@ -835,7 +846,7 @@ textarea {
 }
 .bi-list-item-select2:active,
 .bi-list-item-select2.active {
-  color: #3685f2;
+  color: #ffffff;
   background-color: #f7f8fa;
 }
 .bi-list-item-select2:active .bi-input,
@@ -846,6 +857,10 @@ textarea {
 .bi-list-item-select2.active .bi-textarea {
   color: #3685f2;
 }
+.bi-list-item-select2:active .bi-high-light,
+.bi-list-item-select2.active .bi-high-light {
+  color: #ffffff;
+}
 .bi-theme-dark .bi-list-item-select:hover,
 .bi-theme-dark .bi-list-item-select.hover {
   color: #ffffff;
diff --git a/src/case/segment/button.segment.js b/src/case/segment/button.segment.js
index bd024ed07..0abac9041 100644
--- a/src/case/segment/button.segment.js
+++ b/src/case/segment/button.segment.js
@@ -10,7 +10,7 @@ BI.SegmentButton = BI.inherit(BI.BasicButton, {
     _defaultConfig: function () {
         var conf = BI.SegmentButton.superclass._defaultConfig.apply(this, arguments);
         return BI.extend(conf, {
-            baseCls: (conf.baseCls || "") + " bi-segment-button bi-list-item-active",
+            baseCls: (conf.baseCls || "") + " bi-segment-button bi-list-item-select",
             shadow: true,
             readonly: true,
             hgap: 5
diff --git a/src/css/base/colorchooser/colorchooser.css b/src/css/base/colorchooser/colorchooser.css
index f49d79fc2..2161422d0 100644
--- a/src/css/base/colorchooser/colorchooser.css
+++ b/src/css/base/colorchooser/colorchooser.css
@@ -8,7 +8,7 @@
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
   border-radius: 2px;
-  box-shadow: 0px 0px 2px 1px #d4dadd inset;
-  -webkit-box-shadow: 0px 0px 2px 1px #d4dadd inset;
-  -moz-box-shadow: 0px 0px 2px 1px #d4dadd inset;
+  box-shadow: 0px 0px 2px 1px #d0d4da inset;
+  -webkit-box-shadow: 0px 0px 2px 1px #d0d4da inset;
+  -moz-box-shadow: 0px 0px 2px 1px #d0d4da inset;
 }
diff --git a/src/css/base/segment/button.css b/src/css/base/segment/button.css
index e69de29bb..579852f6c 100644
--- a/src/css/base/segment/button.css
+++ b/src/css/base/segment/button.css
@@ -0,0 +1,3 @@
+.bi-segment-button {
+  color: #3685f2;
+}
diff --git a/src/css/base/segment/segment.css b/src/css/base/segment/segment.css
index f5d717124..db51ddb5e 100644
--- a/src/css/base/segment/segment.css
+++ b/src/css/base/segment/segment.css
@@ -3,12 +3,12 @@
   overflow-x: hidden;
   overflow-y: hidden;
   background: #ffffff;
-  border-right: 1px solid #e8eaed;
-  border-top: 1px solid #e8eaed;
-  border-bottom: 1px solid #e8eaed;
+  border-right: 1px solid #3685f2;
+  border-top: 1px solid #3685f2;
+  border-bottom: 1px solid #3685f2;
 }
 .bi-segment > .first-element {
-  border-left: 1px solid #e8eaed;
+  border-left: 1px solid #3685f2;
   -webkit-border-radius: 6px 0px 0px 6px;
   -moz-border-radius: 6px 0px 0px 6px;
   border-radius: 6px 0px 0px 6px;
@@ -18,6 +18,10 @@
   -moz-border-radius: 0px 6px 6px 0px;
   border-radius: 0px 6px 6px 0px;
 }
+.bi-segment.disabled > .center-element,
+.bi-segment.disabled > .first-element {
+  border-color: #F0F3F7;
+}
 .bi-theme-dark .bi-segment > .center-element {
   overflow: hidden;
   overflow-x: hidden;
diff --git a/src/css/core/utils/common.css b/src/css/core/utils/common.css
index ec06e3e74..871235f11 100644
--- a/src/css/core/utils/common.css
+++ b/src/css/core/utils/common.css
@@ -803,30 +803,41 @@ textarea {
 .bi-list-item-select.button-warning.active.bi-high-light-border {
   border-color: #e85050;
 }
-.bi-list-item-select.disabled,
-.bi-list-item-select.disabled:hover,
-.bi-list-item-select.disabled:active {
+.bi-list-item-select.disabled {
   color: #9ea6b2 !important;
   background-color: transparent !important;
 }
-.bi-list-item-select.disabled .bi-input,
-.bi-list-item-select.disabled:hover .bi-input,
-.bi-list-item-select.disabled:active .bi-input {
+.bi-list-item-select.disabled .bi-input {
   color: #9ea6b2 !important;
 }
-.bi-list-item-select.disabled .bi-textarea,
-.bi-list-item-select.disabled:hover .bi-textarea,
-.bi-list-item-select.disabled:active .bi-textarea {
+.bi-list-item-select.disabled .bi-textarea {
   color: #9ea6b2 !important;
 }
-.bi-list-item-select.disabled .bi-high-light,
-.bi-list-item-select.disabled:hover .bi-high-light,
-.bi-list-item-select.disabled:active .bi-high-light {
+.bi-list-item-select.disabled .bi-high-light {
   color: #9ea6b2 !important;
 }
-.bi-list-item-select.disabled.bi-high-light-border,
-.bi-list-item-select.disabled:hover.bi-high-light-border,
-.bi-list-item-select.disabled:active.bi-high-light-border {
+.bi-list-item-select.disabled.bi-high-light-border {
+  border-color: #F0F3F7;
+}
+.bi-list-item-select.disabled.hover,
+.bi-list-item-select.disabled.active {
+  color: #ffffff !important;
+  background-color: #d0d4da !important;
+}
+.bi-list-item-select.disabled.hover .bi-input,
+.bi-list-item-select.disabled.active .bi-input {
+  color: #ffffff !important;
+}
+.bi-list-item-select.disabled.hover .bi-textarea,
+.bi-list-item-select.disabled.active .bi-textarea {
+  color: #ffffff !important;
+}
+.bi-list-item-select.disabled.hover .bi-high-light,
+.bi-list-item-select.disabled.active .bi-high-light {
+  color: #9ea6b2 !important;
+}
+.bi-list-item-select.disabled.hover.bi-high-light-border,
+.bi-list-item-select.disabled.active.bi-high-light-border {
   border-color: #F0F3F7;
 }
 .bi-list-item-select2:hover,
@@ -835,7 +846,7 @@ textarea {
 }
 .bi-list-item-select2:active,
 .bi-list-item-select2.active {
-  color: #3685f2;
+  color: #ffffff;
   background-color: #f7f8fa;
 }
 .bi-list-item-select2:active .bi-input,
@@ -846,6 +857,10 @@ textarea {
 .bi-list-item-select2.active .bi-textarea {
   color: #3685f2;
 }
+.bi-list-item-select2:active .bi-high-light,
+.bi-list-item-select2.active .bi-high-light {
+  color: #ffffff;
+}
 .bi-theme-dark .bi-list-item-select:hover,
 .bi-theme-dark .bi-list-item-select.hover {
   color: #ffffff;
diff --git a/src/less/base/colorchooser/colorchooser.trigger.less b/src/less/base/colorchooser/colorchooser.trigger.less
index 15bf5fec0..73fb70dfc 100644
--- a/src/less/base/colorchooser/colorchooser.trigger.less
+++ b/src/less/base/colorchooser/colorchooser.trigger.less
@@ -2,5 +2,5 @@
 
 .bi-color-chooser-trigger {
   .border-radius(2px);
-  .box-shadow(0px, 0px, 2px, 1px, @color-bi-background-dark, inset);
+  .box-shadow(0px, 0px, 2px, 1px, @color-bi-background-dark-gray, inset);
 }
\ No newline at end of file
diff --git a/src/less/base/segment/button.segment.less b/src/less/base/segment/button.segment.less
index 1f9bad1c0..002372513 100644
--- a/src/less/base/segment/button.segment.less
+++ b/src/less/base/segment/button.segment.less
@@ -1,4 +1,5 @@
 @import "../../index";
 
 .bi-segment-button{
+  color: @color-bi-text-highlight;
 }
\ No newline at end of file
diff --git a/src/less/base/segment/segment.less b/src/less/base/segment/segment.less
index c4126d540..6326344e4 100644
--- a/src/less/base/segment/segment.less
+++ b/src/less/base/segment/segment.less
@@ -4,17 +4,20 @@
   & > .center-element{
     .overflow-hidden();
     background: @color-bi-background-default;
-    border-right: 1px solid @color-bi-border-line;
-    border-top: 1px solid @color-bi-border-line;
-    border-bottom: 1px solid @color-bi-border-line;
+    border-right: 1px solid @color-bi-border-highlight;
+    border-top: 1px solid @color-bi-border-highlight;
+    border-bottom: 1px solid @color-bi-border-highlight;
   }
   & > .first-element{
-    border-left: 1px solid @color-bi-border-line;
+    border-left: 1px solid @color-bi-border-highlight;
     .border-corner-radius(6px,0px,0px,6px)
   }
   & > .last-element{
     .border-corner-radius(0px,6px,6px,0px)
   }
+  &.disabled > .center-element, &.disabled > .first-element{
+    border-color: @color-bi-border-disabled;
+  }
 }
 
 .bi-theme-dark {
diff --git a/src/less/core/utils/common.less b/src/less/core/utils/common.less
index aa6c961fb..aba81e305 100644
--- a/src/less/core/utils/common.less
+++ b/src/less/core/utils/common.less
@@ -793,15 +793,29 @@ textarea {
     }
   }
   &.disabled {
-    &, &:hover, &:active {
+    color: @color-bi-text-disabled !important;
+    & .bi-input {
+      color: @color-bi-text-disabled !important;
+    }
+    & .bi-textarea {
       color: @color-bi-text-disabled !important;
+    }
+    background-color: transparent !important;
+    & .bi-high-light {
+      color: @color-bi-text-disabled !important;
+    }
+    &.bi-high-light-border {
+      border-color: @color-bi-border-disabled;
+    }
+    &.hover, &.active {
+      color: @color-bi-text !important;
       & .bi-input {
-        color: @color-bi-text-disabled !important;
+        color: @color-bi-text !important;
       }
       & .bi-textarea {
-        color: @color-bi-text-disabled !important;
+        color: @color-bi-text !important;
       }
-      background-color: transparent !important;
+      background-color: @color-bi-background-dark-gray !important;
       & .bi-high-light {
         color: @color-bi-text-disabled !important;
       }
@@ -818,7 +832,7 @@ textarea {
     background-color: @color-bi-background-normal;
   }
   &:active, &.active {
-    color: @color-bi-text-highlight;
+    color: @color-bi-text;
     & .bi-input {
       color: @color-bi-text-highlight;
     }
@@ -826,6 +840,9 @@ textarea {
       color: @color-bi-text-highlight;
     }
     background-color: @color-bi-background-normal;
+    & .bi-high-light {
+      color: @color-bi-text;
+    }
   }
 }
 
diff --git a/src/less/lib/colors.less b/src/less/lib/colors.less
index e8c469be8..aad538cb7 100644
--- a/src/less/lib/colors.less
+++ b/src/less/lib/colors.less
@@ -41,7 +41,7 @@
 //黑色背景
 @color-bi-background-black: @background-color-black;
 //深灰色背景
-@color-bi-background-dark: @background-color-dark;
+@color-bi-background-dark-gray: @background-color-dark-gray;
 //灰色背景(浅)
 @color-bi-background-light-gray: @background-color-light-gray;
 //灰化背景