diff --git a/bi/base.js b/bi/base.js
index aea1b5f036..0077aef3bc 100644
--- a/bi/base.js
+++ b/bi/base.js
@@ -3997,7 +3997,7 @@ BI.Navigation = BI.inherit(BI.Widget, {
     },
 
     setSelect: function (v) {
-        this._assertCard();
+        this._assertCard(v);
         this.layout.showCardByName(v);
         this._deleteOtherCards(v);
         if (this.showIndex !== v) {
diff --git a/bi/core.css b/bi/core.css
index 5044d7d898..870e951fd0 100644
--- a/bi/core.css
+++ b/bi/core.css
@@ -3027,6 +3027,11 @@
   background-color: transparent !important;
   color: #cccccc !important;
 }
+.bi-list-item.disabled .bi-high-light,
+.bi-list-item.disabled:hover .bi-high-light,
+.bi-list-item.disabled:active .bi-high-light {
+  color: #cccccc !important;
+}
 .bi-theme-dark .bi-list-item:hover,
 .bi-theme-dark .bi-list-item.hover {
   background-color: #191b2b;
@@ -3038,6 +3043,11 @@
   background-color: transparent !important;
   color: #666666 !important;
 }
+.bi-theme-dark .bi-list-item.disabled .bi-high-light,
+.bi-theme-dark .bi-list-item.disabled:hover .bi-high-light,
+.bi-theme-dark .bi-list-item.disabled:active .bi-high-light {
+  color: #666666 !important;
+}
 .bi-list-item-simple:hover,
 .bi-list-item-simple.hover {
   color: #1a1a1a;
@@ -3047,6 +3057,11 @@
 .bi-list-item-simple.disabled:active {
   color: #cccccc !important;
 }
+.bi-list-item-simple.disabled .bi-high-light,
+.bi-list-item-simple.disabled:hover .bi-high-light,
+.bi-list-item-simple.disabled:active .bi-high-light {
+  color: #cccccc !important;
+}
 .bi-theme-dark .bi-list-item-simple:hover,
 .bi-theme-dark .bi-list-item-simple.hover {
   color: #ffffff;
@@ -3056,6 +3071,11 @@
 .bi-theme-dark .bi-list-item-simple.disabled:active {
   color: #666666 !important;
 }
+.bi-theme-dark .bi-list-item-simple.disabled .bi-high-light,
+.bi-theme-dark .bi-list-item-simple.disabled:hover .bi-high-light,
+.bi-theme-dark .bi-list-item-simple.disabled:active .bi-high-light {
+  color: #666666 !important;
+}
 .bi-list-item-effect:hover {
   color: #1a1a1a;
 }
@@ -3068,6 +3088,11 @@
 .bi-list-item-effect.disabled:active {
   color: #cccccc !important;
 }
+.bi-list-item-effect.disabled .bi-high-light,
+.bi-list-item-effect.disabled:hover .bi-high-light,
+.bi-list-item-effect.disabled:active .bi-high-light {
+  color: #cccccc !important;
+}
 .bi-theme-dark .bi-list-item-effect:hover {
   color: #ffffff;
 }
@@ -3081,6 +3106,11 @@
   background-color: transparent !important;
   color: #666666 !important;
 }
+.bi-theme-dark .bi-list-item-effect.disabled .bi-high-light,
+.bi-theme-dark .bi-list-item-effect.disabled:hover .bi-high-light,
+.bi-theme-dark .bi-list-item-effect.disabled:active .bi-high-light {
+  color: #666666 !important;
+}
 .bi-list-item-hover:hover,
 .bi-list-item-hover.hover {
   color: #3f8ce8;
@@ -3092,6 +3122,11 @@
   color: #cccccc !important;
   background-color: transparent !important;
 }
+.bi-list-item-hover.disabled .bi-high-light,
+.bi-list-item-hover.disabled:hover .bi-high-light,
+.bi-list-item-hover.disabled:active .bi-high-light {
+  color: #cccccc !important;
+}
 .bi-theme-dark .bi-list-item-hover:hover,
 .bi-theme-dark .bi-list-item-hover.hover {
   color: #3f8ce8;
@@ -3103,6 +3138,11 @@
   background-color: transparent !important;
   color: #666666 !important;
 }
+.bi-theme-dark .bi-list-item-hover.disabled .bi-high-light,
+.bi-theme-dark .bi-list-item-hover.disabled:hover .bi-high-light,
+.bi-theme-dark .bi-list-item-hover.disabled:active .bi-high-light {
+  color: #666666 !important;
+}
 .bi-list-item-active:hover,
 .bi-list-item-active.hover {
   color: #1a1a1a;
@@ -3119,6 +3159,11 @@
   background-color: transparent !important;
   color: #cccccc !important;
 }
+.bi-list-item-active.disabled .bi-high-light,
+.bi-list-item-active.disabled:hover .bi-high-light,
+.bi-list-item-active.disabled:active .bi-high-light {
+  color: #cccccc !important;
+}
 .bi-theme-dark .bi-list-item-active:hover,
 .bi-theme-dark .bi-list-item-active.hover {
   background-color: #191b2b;
@@ -3135,6 +3180,11 @@
   background-color: transparent !important;
   color: #666666 !important;
 }
+.bi-theme-dark .bi-list-item-active.disabled .bi-high-light,
+.bi-theme-dark .bi-list-item-active.disabled:hover .bi-high-light,
+.bi-theme-dark .bi-list-item-active.disabled:active .bi-high-light {
+  color: #666666 !important;
+}
 .bi-list-item-select:hover,
 .bi-list-item-select.hover {
   color: #3f8ce8;
@@ -3163,7 +3213,7 @@
 .bi-theme-dark .bi-list-item-select:hover,
 .bi-theme-dark .bi-list-item-select.hover {
   color: #3f8ce8;
-  background-color: #eff1f4;
+  background-color: #191b2b;
 }
 .bi-theme-dark .bi-list-item-select:active,
 .bi-theme-dark .bi-list-item-select.active {
@@ -3185,6 +3235,26 @@
 .bi-theme-dark .bi-list-item-select.disabled:active .bi-high-light {
   color: #666666 !important;
 }
+.bi-list-item-choose:active,
+.bi-list-item-choose.active {
+  color: #ffffff;
+  background-color: #3f8ce8;
+}
+.bi-list-item-choose:active .bi-high-light,
+.bi-list-item-choose.active .bi-high-light {
+  color: #ffffff;
+}
+.bi-list-item-choose.disabled,
+.bi-list-item-choose.disabled:hover,
+.bi-list-item-choose.disabled:active {
+  color: #cccccc !important;
+  background-color: transparent !important;
+}
+.bi-list-item-choose.disabled .bi-high-light,
+.bi-list-item-choose.disabled:hover .bi-high-light,
+.bi-list-item-choose.disabled:active .bi-high-light {
+  color: #cccccc !important;
+}
 /*****************cursor*****************/
 .cursor-pointer {
   cursor: pointer;
diff --git a/demo/js/face.js b/demo/js/face.js
index 63afbcd0a8..09e94e9cdc 100644
--- a/demo/js/face.js
+++ b/demo/js/face.js
@@ -563,15 +563,15 @@ Demo.Face = BI.inherit(BI.Widget, {
         var maskBackgroundColor = this.maskBackgroundColor.getValue();
 
         this._setStyle({
-            ".bi-background": {
-                "background-color": backgroundColor + "!important",
-                "color": fontColor + "!important"
+            "#wrapper.bi-background, #wrapper .bi-background": {
+                "background-color": backgroundColor,
+                "color": fontColor
             },
-            ".bi-card": {
-                "background-color": cardBackgroundColor + "!important"
+            "#wrapper .bi-card": {
+                "background-color": cardBackgroundColor
             },
-            ".bi-tips": {
-                "color": grayFontColor + "!important"
+            "#wrapper .bi-tips": {
+                "color": grayFontColor
             },
             "div::-webkit-scrollbar,.scrollbar-layout-main": {
                 "background-color": scrollBackgroundColor + "!important"
diff --git a/docs/base.js b/docs/base.js
index aea1b5f036..0077aef3bc 100644
--- a/docs/base.js
+++ b/docs/base.js
@@ -3997,7 +3997,7 @@ BI.Navigation = BI.inherit(BI.Widget, {
     },
 
     setSelect: function (v) {
-        this._assertCard();
+        this._assertCard(v);
         this.layout.showCardByName(v);
         this._deleteOtherCards(v);
         if (this.showIndex !== v) {
diff --git a/docs/core.css b/docs/core.css
index 5044d7d898..870e951fd0 100644
--- a/docs/core.css
+++ b/docs/core.css
@@ -3027,6 +3027,11 @@
   background-color: transparent !important;
   color: #cccccc !important;
 }
+.bi-list-item.disabled .bi-high-light,
+.bi-list-item.disabled:hover .bi-high-light,
+.bi-list-item.disabled:active .bi-high-light {
+  color: #cccccc !important;
+}
 .bi-theme-dark .bi-list-item:hover,
 .bi-theme-dark .bi-list-item.hover {
   background-color: #191b2b;
@@ -3038,6 +3043,11 @@
   background-color: transparent !important;
   color: #666666 !important;
 }
+.bi-theme-dark .bi-list-item.disabled .bi-high-light,
+.bi-theme-dark .bi-list-item.disabled:hover .bi-high-light,
+.bi-theme-dark .bi-list-item.disabled:active .bi-high-light {
+  color: #666666 !important;
+}
 .bi-list-item-simple:hover,
 .bi-list-item-simple.hover {
   color: #1a1a1a;
@@ -3047,6 +3057,11 @@
 .bi-list-item-simple.disabled:active {
   color: #cccccc !important;
 }
+.bi-list-item-simple.disabled .bi-high-light,
+.bi-list-item-simple.disabled:hover .bi-high-light,
+.bi-list-item-simple.disabled:active .bi-high-light {
+  color: #cccccc !important;
+}
 .bi-theme-dark .bi-list-item-simple:hover,
 .bi-theme-dark .bi-list-item-simple.hover {
   color: #ffffff;
@@ -3056,6 +3071,11 @@
 .bi-theme-dark .bi-list-item-simple.disabled:active {
   color: #666666 !important;
 }
+.bi-theme-dark .bi-list-item-simple.disabled .bi-high-light,
+.bi-theme-dark .bi-list-item-simple.disabled:hover .bi-high-light,
+.bi-theme-dark .bi-list-item-simple.disabled:active .bi-high-light {
+  color: #666666 !important;
+}
 .bi-list-item-effect:hover {
   color: #1a1a1a;
 }
@@ -3068,6 +3088,11 @@
 .bi-list-item-effect.disabled:active {
   color: #cccccc !important;
 }
+.bi-list-item-effect.disabled .bi-high-light,
+.bi-list-item-effect.disabled:hover .bi-high-light,
+.bi-list-item-effect.disabled:active .bi-high-light {
+  color: #cccccc !important;
+}
 .bi-theme-dark .bi-list-item-effect:hover {
   color: #ffffff;
 }
@@ -3081,6 +3106,11 @@
   background-color: transparent !important;
   color: #666666 !important;
 }
+.bi-theme-dark .bi-list-item-effect.disabled .bi-high-light,
+.bi-theme-dark .bi-list-item-effect.disabled:hover .bi-high-light,
+.bi-theme-dark .bi-list-item-effect.disabled:active .bi-high-light {
+  color: #666666 !important;
+}
 .bi-list-item-hover:hover,
 .bi-list-item-hover.hover {
   color: #3f8ce8;
@@ -3092,6 +3122,11 @@
   color: #cccccc !important;
   background-color: transparent !important;
 }
+.bi-list-item-hover.disabled .bi-high-light,
+.bi-list-item-hover.disabled:hover .bi-high-light,
+.bi-list-item-hover.disabled:active .bi-high-light {
+  color: #cccccc !important;
+}
 .bi-theme-dark .bi-list-item-hover:hover,
 .bi-theme-dark .bi-list-item-hover.hover {
   color: #3f8ce8;
@@ -3103,6 +3138,11 @@
   background-color: transparent !important;
   color: #666666 !important;
 }
+.bi-theme-dark .bi-list-item-hover.disabled .bi-high-light,
+.bi-theme-dark .bi-list-item-hover.disabled:hover .bi-high-light,
+.bi-theme-dark .bi-list-item-hover.disabled:active .bi-high-light {
+  color: #666666 !important;
+}
 .bi-list-item-active:hover,
 .bi-list-item-active.hover {
   color: #1a1a1a;
@@ -3119,6 +3159,11 @@
   background-color: transparent !important;
   color: #cccccc !important;
 }
+.bi-list-item-active.disabled .bi-high-light,
+.bi-list-item-active.disabled:hover .bi-high-light,
+.bi-list-item-active.disabled:active .bi-high-light {
+  color: #cccccc !important;
+}
 .bi-theme-dark .bi-list-item-active:hover,
 .bi-theme-dark .bi-list-item-active.hover {
   background-color: #191b2b;
@@ -3135,6 +3180,11 @@
   background-color: transparent !important;
   color: #666666 !important;
 }
+.bi-theme-dark .bi-list-item-active.disabled .bi-high-light,
+.bi-theme-dark .bi-list-item-active.disabled:hover .bi-high-light,
+.bi-theme-dark .bi-list-item-active.disabled:active .bi-high-light {
+  color: #666666 !important;
+}
 .bi-list-item-select:hover,
 .bi-list-item-select.hover {
   color: #3f8ce8;
@@ -3163,7 +3213,7 @@
 .bi-theme-dark .bi-list-item-select:hover,
 .bi-theme-dark .bi-list-item-select.hover {
   color: #3f8ce8;
-  background-color: #eff1f4;
+  background-color: #191b2b;
 }
 .bi-theme-dark .bi-list-item-select:active,
 .bi-theme-dark .bi-list-item-select.active {
@@ -3185,6 +3235,26 @@
 .bi-theme-dark .bi-list-item-select.disabled:active .bi-high-light {
   color: #666666 !important;
 }
+.bi-list-item-choose:active,
+.bi-list-item-choose.active {
+  color: #ffffff;
+  background-color: #3f8ce8;
+}
+.bi-list-item-choose:active .bi-high-light,
+.bi-list-item-choose.active .bi-high-light {
+  color: #ffffff;
+}
+.bi-list-item-choose.disabled,
+.bi-list-item-choose.disabled:hover,
+.bi-list-item-choose.disabled:active {
+  color: #cccccc !important;
+  background-color: transparent !important;
+}
+.bi-list-item-choose.disabled .bi-high-light,
+.bi-list-item-choose.disabled:hover .bi-high-light,
+.bi-list-item-choose.disabled:active .bi-high-light {
+  color: #cccccc !important;
+}
 /*****************cursor*****************/
 .cursor-pointer {
   cursor: pointer;
diff --git a/docs/demo.js b/docs/demo.js
index b191d95383..b91d3b6bed 100644
--- a/docs/demo.js
+++ b/docs/demo.js
@@ -5083,15 +5083,15 @@ BI.shortcut("demo.vtape", Demo.VtapeLayout);Demo.Face = BI.inherit(BI.Widget, {
         var maskBackgroundColor = this.maskBackgroundColor.getValue();
 
         this._setStyle({
-            ".bi-background": {
-                "background-color": backgroundColor + "!important",
-                "color": fontColor + "!important"
+            "#wrapper.bi-background, #wrapper .bi-background": {
+                "background-color": backgroundColor,
+                "color": fontColor
             },
-            ".bi-card": {
-                "background-color": cardBackgroundColor + "!important"
+            "#wrapper .bi-card": {
+                "background-color": cardBackgroundColor
             },
-            ".bi-tips": {
-                "color": grayFontColor + "!important"
+            "#wrapper .bi-tips": {
+                "color": grayFontColor
             },
             "div::-webkit-scrollbar,.scrollbar-layout-main": {
                 "background-color": scrollBackgroundColor + "!important"
diff --git a/src/css/core/utils/common.css b/src/css/core/utils/common.css
index 9798047f77..e6cf5e6ada 100644
--- a/src/css/core/utils/common.css
+++ b/src/css/core/utils/common.css
@@ -125,6 +125,11 @@
   background-color: transparent !important;
   color: #cccccc !important;
 }
+.bi-list-item.disabled .bi-high-light,
+.bi-list-item.disabled:hover .bi-high-light,
+.bi-list-item.disabled:active .bi-high-light {
+  color: #cccccc !important;
+}
 .bi-theme-dark .bi-list-item:hover,
 .bi-theme-dark .bi-list-item.hover {
   background-color: #191b2b;
@@ -136,6 +141,11 @@
   background-color: transparent !important;
   color: #666666 !important;
 }
+.bi-theme-dark .bi-list-item.disabled .bi-high-light,
+.bi-theme-dark .bi-list-item.disabled:hover .bi-high-light,
+.bi-theme-dark .bi-list-item.disabled:active .bi-high-light {
+  color: #666666 !important;
+}
 .bi-list-item-simple:hover,
 .bi-list-item-simple.hover {
   color: #1a1a1a;
@@ -145,6 +155,11 @@
 .bi-list-item-simple.disabled:active {
   color: #cccccc !important;
 }
+.bi-list-item-simple.disabled .bi-high-light,
+.bi-list-item-simple.disabled:hover .bi-high-light,
+.bi-list-item-simple.disabled:active .bi-high-light {
+  color: #cccccc !important;
+}
 .bi-theme-dark .bi-list-item-simple:hover,
 .bi-theme-dark .bi-list-item-simple.hover {
   color: #ffffff;
@@ -154,6 +169,11 @@
 .bi-theme-dark .bi-list-item-simple.disabled:active {
   color: #666666 !important;
 }
+.bi-theme-dark .bi-list-item-simple.disabled .bi-high-light,
+.bi-theme-dark .bi-list-item-simple.disabled:hover .bi-high-light,
+.bi-theme-dark .bi-list-item-simple.disabled:active .bi-high-light {
+  color: #666666 !important;
+}
 .bi-list-item-effect:hover {
   color: #1a1a1a;
 }
@@ -166,6 +186,11 @@
 .bi-list-item-effect.disabled:active {
   color: #cccccc !important;
 }
+.bi-list-item-effect.disabled .bi-high-light,
+.bi-list-item-effect.disabled:hover .bi-high-light,
+.bi-list-item-effect.disabled:active .bi-high-light {
+  color: #cccccc !important;
+}
 .bi-theme-dark .bi-list-item-effect:hover {
   color: #ffffff;
 }
@@ -179,6 +204,11 @@
   background-color: transparent !important;
   color: #666666 !important;
 }
+.bi-theme-dark .bi-list-item-effect.disabled .bi-high-light,
+.bi-theme-dark .bi-list-item-effect.disabled:hover .bi-high-light,
+.bi-theme-dark .bi-list-item-effect.disabled:active .bi-high-light {
+  color: #666666 !important;
+}
 .bi-list-item-hover:hover,
 .bi-list-item-hover.hover {
   color: #3f8ce8;
@@ -190,6 +220,11 @@
   color: #cccccc !important;
   background-color: transparent !important;
 }
+.bi-list-item-hover.disabled .bi-high-light,
+.bi-list-item-hover.disabled:hover .bi-high-light,
+.bi-list-item-hover.disabled:active .bi-high-light {
+  color: #cccccc !important;
+}
 .bi-theme-dark .bi-list-item-hover:hover,
 .bi-theme-dark .bi-list-item-hover.hover {
   color: #3f8ce8;
@@ -201,6 +236,11 @@
   background-color: transparent !important;
   color: #666666 !important;
 }
+.bi-theme-dark .bi-list-item-hover.disabled .bi-high-light,
+.bi-theme-dark .bi-list-item-hover.disabled:hover .bi-high-light,
+.bi-theme-dark .bi-list-item-hover.disabled:active .bi-high-light {
+  color: #666666 !important;
+}
 .bi-list-item-active:hover,
 .bi-list-item-active.hover {
   color: #1a1a1a;
@@ -217,6 +257,11 @@
   background-color: transparent !important;
   color: #cccccc !important;
 }
+.bi-list-item-active.disabled .bi-high-light,
+.bi-list-item-active.disabled:hover .bi-high-light,
+.bi-list-item-active.disabled:active .bi-high-light {
+  color: #cccccc !important;
+}
 .bi-theme-dark .bi-list-item-active:hover,
 .bi-theme-dark .bi-list-item-active.hover {
   background-color: #191b2b;
@@ -233,6 +278,11 @@
   background-color: transparent !important;
   color: #666666 !important;
 }
+.bi-theme-dark .bi-list-item-active.disabled .bi-high-light,
+.bi-theme-dark .bi-list-item-active.disabled:hover .bi-high-light,
+.bi-theme-dark .bi-list-item-active.disabled:active .bi-high-light {
+  color: #666666 !important;
+}
 .bi-list-item-select:hover,
 .bi-list-item-select.hover {
   color: #3f8ce8;
diff --git a/src/less/core/utils/common.less b/src/less/core/utils/common.less
index e815d6a3c4..fbfe3a2b80 100644
--- a/src/less/core/utils/common.less
+++ b/src/less/core/utils/common.less
@@ -173,6 +173,9 @@
     &, &:hover, &:active {
       background-color: transparent !important;
       color: @color-bi-text-disabled !important;
+      & .bi-high-light {
+        color: @color-bi-text-disabled !important;
+      }
     }
   }
 }
@@ -187,6 +190,9 @@
       &, &:hover, &:active {
         background-color: transparent !important;
         color: @color-bi-text-disabled-theme-dark !important;
+        & .bi-high-light {
+          color: @color-bi-text-disabled-theme-dark !important;
+        }
       }
     }
   }
@@ -200,6 +206,9 @@
   &.disabled {
     &, &:hover, &:active {
       color: @color-bi-text-disabled !important;
+      & .bi-high-light {
+        color: @color-bi-text-disabled !important;
+      }
     }
   }
 }
@@ -212,6 +221,9 @@
     &.disabled {
       &, &:hover, &:active {
         color: @color-bi-text-disabled-theme-dark !important;
+        & .bi-high-light {
+          color: @color-bi-text-disabled-theme-dark !important;
+        }
       }
     }
   }
@@ -228,6 +240,9 @@
   &.disabled {
     &, &:hover, &:active {
       color: @color-bi-text-disabled !important;
+      & .bi-high-light {
+        color: @color-bi-text-disabled !important;
+      }
     }
   }
 }
@@ -244,6 +259,9 @@
       &, &:hover, &:active {
         background-color: transparent !important;
         color: @color-bi-text-disabled-theme-dark !important;
+        & .bi-high-light {
+          color: @color-bi-text-disabled-theme-dark !important;
+        }
       }
     }
   }
@@ -259,6 +277,9 @@
     &, &:hover, &:active {
       color: @color-bi-text-disabled !important;
       background-color: transparent !important;
+      & .bi-high-light {
+        color: @color-bi-text-disabled !important;
+      }
     }
   }
 }
@@ -273,6 +294,9 @@
       &, &:hover, &:active {
         background-color: transparent !important;
         color: @color-bi-text-disabled-theme-dark !important;
+        & .bi-high-light {
+          color: @color-bi-text-disabled-theme-dark !important;
+        }
       }
     }
   }
@@ -292,6 +316,9 @@
     &, &:hover, &:active {
       background-color: transparent !important;
       color: @color-bi-text-disabled !important;
+      & .bi-high-light {
+        color: @color-bi-text-disabled !important;
+      }
     }
   }
 }
@@ -310,6 +337,9 @@
       &, &:hover, &:active {
         background-color: transparent !important;
         color: @color-bi-text-disabled-theme-dark !important;
+        & .bi-high-light {
+          color: @color-bi-text-disabled-theme-dark !important;
+        }
       }
     }
   }