From 080b9c1f7cbf9be2c60ad43ab42f66fbd2b56d93 Mon Sep 17 00:00:00 2001
From: guy <guy@finereport.com>
Date: Tue, 11 Jul 2017 17:30:45 +0800
Subject: [PATCH] add

---
 bi/base.js                                |   2 +-
 bi/core.css                               | 209 ++++++++++++++++++++++
 docs/base.js                              |   2 +-
 docs/core.css                             | 209 ++++++++++++++++++++++
 src/base/single/editor/editor.textarea.js |   2 +-
 src/css/core/utils/common.css             | 209 ++++++++++++++++++++++
 src/less/core/utils/common.less           | 162 +++++++++++++++++
 7 files changed, 792 insertions(+), 3 deletions(-)

diff --git a/bi/base.js b/bi/base.js
index 2cf4c5e2e2..e478a6fa47 100644
--- a/bi/base.js
+++ b/bi/base.js
@@ -18335,7 +18335,7 @@ BI.TextAreaEditor = BI.inherit(BI.Single, {
             tagName: "textarea",
             width: "100%",
             height: "100%",
-            cls: "textarea-editor-content display-block"
+            cls: "bi-textarea textarea-editor-content display-block"
         });
         this.content.element.css({"resize": "none"});
         BI.createWidget({
diff --git a/bi/core.css b/bi/core.css
index a77c93b59f..1517944011 100644
--- a/bi/core.css
+++ b/bi/core.css
@@ -3181,6 +3181,9 @@ i {
 .base-disabled .bi-input {
   color: #cccccc !important;
 }
+.base-disabled .bi-textarea {
+  color: #cccccc !important;
+}
 .base-disabled .b-font:before {
   color: #cccccc !important;
 }
@@ -3190,6 +3193,9 @@ i {
 .bi-theme-dark .base-disabled .bi-input {
   color: #666666 !important;
 }
+.bi-theme-dark .base-disabled .bi-textarea {
+  color: #666666 !important;
+}
 .bi-theme-dark .base-disabled .b-font:before {
   color: #666666 !important;
 }
@@ -3215,6 +3221,9 @@ i {
 .bi-background .bi-input {
   color: #666666;
 }
+.bi-background .bi-textarea {
+  color: #666666;
+}
 .bi-theme-dark .bi-background {
   background-color: #191b2b;
   color: #cccccc;
@@ -3222,6 +3231,9 @@ i {
 .bi-theme-dark .bi-background .bi-input {
   color: #cccccc;
 }
+.bi-theme-dark .bi-background .bi-textarea {
+  color: #cccccc;
+}
 .bi-card {
   background-color: #ffffff;
   color: #666666;
@@ -3229,6 +3241,9 @@ i {
 .bi-card .bi-input {
   color: #666666;
 }
+.bi-card .bi-textarea {
+  color: #666666;
+}
 .bi-theme-dark .bi-card {
   background-color: #242640;
   color: #cccccc;
@@ -3236,24 +3251,36 @@ i {
 .bi-theme-dark .bi-card .bi-input {
   color: #cccccc;
 }
+.bi-theme-dark .bi-card .bi-textarea {
+  color: #cccccc;
+}
 .bi-disabled {
   color: #cccccc;
 }
 .bi-disabled .bi-input {
   color: #cccccc;
 }
+.bi-disabled .bi-textarea {
+  color: #cccccc;
+}
 .bi-theme-dark .bi-disabled {
   color: #666666;
 }
 .bi-theme-dark .bi-disabled .bi-input {
   color: #666666;
 }
+.bi-theme-dark .bi-disabled .bi-textarea {
+  color: #666666;
+}
 .bi-tips {
   color: #999999;
 }
 .bi-tips .bi-input {
   color: #999999;
 }
+.bi-tips .bi-textarea {
+  color: #999999;
+}
 .bi-border {
   border: 1px solid #d4dadd;
 }
@@ -3290,12 +3317,18 @@ i {
 .bi-keyword-red-mark .bi-input {
   color: #f07d0a;
 }
+.bi-keyword-red-mark .bi-textarea {
+  color: #f07d0a;
+}
 .bi-high-light {
   color: #3f8ce8;
 }
 .bi-high-light .bi-input {
   color: #3f8ce8;
 }
+.bi-high-light .bi-textarea {
+  color: #3f8ce8;
+}
 .bi-high-light-background {
   background-color: #3f8ce8;
   color: #ffffff;
@@ -3303,6 +3336,9 @@ i {
 .bi-high-light-background .bi-input {
   color: #ffffff;
 }
+.bi-high-light-background .bi-textarea {
+  color: #ffffff;
+}
 .bi-high-light-border {
   border-color: #178cdf;
 }
@@ -3313,12 +3349,18 @@ i {
 .bi-water-mark .bi-input {
   color: #cccccc;
 }
+.bi-water-mark .bi-textarea {
+  color: #cccccc;
+}
 .bi-theme-dark .bi-water-mark {
   color: #666666;
 }
 .bi-theme-dark .bi-water-mark .bi-input {
   color: #666666;
 }
+.bi-theme-dark .bi-water-mark .bi-textarea {
+  color: #666666;
+}
 .bi-resizer {
   background: #1a1a1a;
   opacity: 0.2;
@@ -3336,6 +3378,9 @@ i {
 .bi-mask .bi-input {
   color: #ffffff;
 }
+.bi-mask .bi-textarea {
+  color: #ffffff;
+}
 .bi-theme-dark .bi-mask {
   color: #242640;
   background-color: rgba(255, 255, 255, 0.2);
@@ -3344,6 +3389,9 @@ i {
 .bi-theme-dark .bi-mask .bi-input {
   color: #242640;
 }
+.bi-theme-dark .bi-mask .bi-textarea {
+  color: #242640;
+}
 .bi-z-index-mask {
   color: #ffffff;
   background-color: rgba(26, 26, 26, 0.5);
@@ -3352,6 +3400,9 @@ i {
 .bi-z-index-mask .bi-input {
   color: #ffffff;
 }
+.bi-z-index-mask .bi-textarea {
+  color: #ffffff;
+}
 .bi-list-item:hover,
 .bi-list-item.hover {
   color: #1a1a1a;
@@ -3362,6 +3413,10 @@ i {
 .bi-list-item.hover .bi-input {
   color: #1a1a1a;
 }
+.bi-list-item:hover .bi-textarea,
+.bi-list-item.hover .bi-textarea {
+  color: #1a1a1a;
+}
 .bi-list-item.disabled,
 .bi-list-item.disabled:hover,
 .bi-list-item.disabled:active {
@@ -3373,6 +3428,11 @@ i {
 .bi-list-item.disabled:active .bi-input {
   color: #cccccc !important;
 }
+.bi-list-item.disabled .bi-textarea,
+.bi-list-item.disabled:hover .bi-textarea,
+.bi-list-item.disabled:active .bi-textarea {
+  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 {
@@ -3388,6 +3448,10 @@ i {
 .bi-theme-dark .bi-list-item.hover .bi-input {
   color: #ffffff;
 }
+.bi-theme-dark .bi-list-item:hover .bi-textarea,
+.bi-theme-dark .bi-list-item.hover .bi-textarea {
+  color: #ffffff;
+}
 .bi-theme-dark .bi-list-item.disabled,
 .bi-theme-dark .bi-list-item.disabled:hover,
 .bi-theme-dark .bi-list-item.disabled:active {
@@ -3399,6 +3463,11 @@ i {
 .bi-theme-dark .bi-list-item.disabled:active .bi-input {
   color: #666666 !important;
 }
+.bi-theme-dark .bi-list-item.disabled .bi-textarea,
+.bi-theme-dark .bi-list-item.disabled:hover .bi-textarea,
+.bi-theme-dark .bi-list-item.disabled:active .bi-textarea {
+  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 {
@@ -3414,6 +3483,9 @@ i {
 .bi-list-item-simple .bi-input {
   color: #999999;
 }
+.bi-list-item-simple .bi-textarea {
+  color: #999999;
+}
 .bi-list-item-simple:hover,
 .bi-list-item-simple.hover {
   color: #3f8ce8;
@@ -3422,6 +3494,10 @@ i {
 .bi-list-item-simple.hover .bi-input {
   color: #3f8ce8;
 }
+.bi-list-item-simple:hover .bi-textarea,
+.bi-list-item-simple.hover .bi-textarea {
+  color: #3f8ce8;
+}
 .bi-list-item-simple.disabled,
 .bi-list-item-simple.disabled:hover,
 .bi-list-item-simple.disabled:active {
@@ -3432,6 +3508,11 @@ i {
 .bi-list-item-simple.disabled:active .bi-input {
   color: #cccccc !important;
 }
+.bi-list-item-simple.disabled .bi-textarea,
+.bi-list-item-simple.disabled:hover .bi-textarea,
+.bi-list-item-simple.disabled:active .bi-textarea {
+  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 {
@@ -3443,6 +3524,9 @@ i {
 .bi-list-item-effect:hover .bi-input {
   color: #1a1a1a;
 }
+.bi-list-item-effect:hover .bi-textarea {
+  color: #1a1a1a;
+}
 .bi-list-item-effect.active,
 .bi-list-item-effect:active {
   color: #3f8ce8;
@@ -3451,6 +3535,10 @@ i {
 .bi-list-item-effect:active .bi-input {
   color: #3f8ce8;
 }
+.bi-list-item-effect.active .bi-textarea,
+.bi-list-item-effect:active .bi-textarea {
+  color: #3f8ce8;
+}
 .bi-list-item-effect.disabled,
 .bi-list-item-effect.disabled:hover,
 .bi-list-item-effect.disabled:active {
@@ -3461,6 +3549,11 @@ i {
 .bi-list-item-effect.disabled:active .bi-input {
   color: #cccccc !important;
 }
+.bi-list-item-effect.disabled .bi-textarea,
+.bi-list-item-effect.disabled:hover .bi-textarea,
+.bi-list-item-effect.disabled:active .bi-textarea {
+  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 {
@@ -3472,6 +3565,9 @@ i {
 .bi-theme-dark .bi-list-item-effect:hover .bi-input {
   color: #ffffff;
 }
+.bi-theme-dark .bi-list-item-effect:hover .bi-textarea {
+  color: #ffffff;
+}
 .bi-theme-dark .bi-list-item-effect.active,
 .bi-theme-dark .bi-list-item-effect:active {
   color: #3f8ce8;
@@ -3480,6 +3576,10 @@ i {
 .bi-theme-dark .bi-list-item-effect:active .bi-input {
   color: #3f8ce8;
 }
+.bi-theme-dark .bi-list-item-effect.active .bi-textarea,
+.bi-theme-dark .bi-list-item-effect:active .bi-textarea {
+  color: #3f8ce8;
+}
 .bi-theme-dark .bi-list-item-effect.disabled,
 .bi-theme-dark .bi-list-item-effect.disabled:hover,
 .bi-theme-dark .bi-list-item-effect.disabled:active {
@@ -3491,6 +3591,11 @@ i {
 .bi-theme-dark .bi-list-item-effect.disabled:active .bi-input {
   color: #666666 !important;
 }
+.bi-theme-dark .bi-list-item-effect.disabled .bi-textarea,
+.bi-theme-dark .bi-list-item-effect.disabled:hover .bi-textarea,
+.bi-theme-dark .bi-list-item-effect.disabled:active .bi-textarea {
+  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 {
@@ -3506,6 +3611,10 @@ i {
 .bi-list-item-active.hover .bi-input {
   color: #1a1a1a;
 }
+.bi-list-item-active:hover .bi-textarea,
+.bi-list-item-active.hover .bi-textarea {
+  color: #1a1a1a;
+}
 .bi-list-item-active.active,
 .bi-list-item-active:active {
   color: #3f8ce8;
@@ -3516,6 +3625,10 @@ i {
 .bi-list-item-active:active .bi-input {
   color: #3f8ce8;
 }
+.bi-list-item-active.active .bi-textarea,
+.bi-list-item-active:active .bi-textarea {
+  color: #3f8ce8;
+}
 .bi-list-item-active.disabled,
 .bi-list-item-active.disabled:hover,
 .bi-list-item-active.disabled:active {
@@ -3527,6 +3640,11 @@ i {
 .bi-list-item-active.disabled:active .bi-input {
   color: #cccccc !important;
 }
+.bi-list-item-active.disabled .bi-textarea,
+.bi-list-item-active.disabled:hover .bi-textarea,
+.bi-list-item-active.disabled:active .bi-textarea {
+  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 {
@@ -3542,6 +3660,10 @@ i {
 .bi-theme-dark .bi-list-item-active.hover .bi-input {
   color: #ffffff;
 }
+.bi-theme-dark .bi-list-item-active:hover .bi-textarea,
+.bi-theme-dark .bi-list-item-active.hover .bi-textarea {
+  color: #ffffff;
+}
 .bi-theme-dark .bi-list-item-active.active,
 .bi-theme-dark .bi-list-item-active:active {
   color: #3f8ce8;
@@ -3552,6 +3674,10 @@ i {
 .bi-theme-dark .bi-list-item-active:active .bi-input {
   color: #3f8ce8;
 }
+.bi-theme-dark .bi-list-item-active.active .bi-textarea,
+.bi-theme-dark .bi-list-item-active:active .bi-textarea {
+  color: #3f8ce8;
+}
 .bi-theme-dark .bi-list-item-active.disabled,
 .bi-theme-dark .bi-list-item-active.disabled:hover,
 .bi-theme-dark .bi-list-item-active.disabled:active {
@@ -3563,6 +3689,11 @@ i {
 .bi-theme-dark .bi-list-item-active.disabled:active .bi-input {
   color: #666666 !important;
 }
+.bi-theme-dark .bi-list-item-active.disabled .bi-textarea,
+.bi-theme-dark .bi-list-item-active.disabled:hover .bi-textarea,
+.bi-theme-dark .bi-list-item-active.disabled:active .bi-textarea {
+  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 {
@@ -3577,6 +3708,10 @@ i {
 .bi-list-item-active2.hover .bi-input {
   color: #1a1a1a;
 }
+.bi-list-item-active2:hover .bi-textarea,
+.bi-list-item-active2.hover .bi-textarea {
+  color: #1a1a1a;
+}
 .bi-list-item-active2.active,
 .bi-list-item-active2:active {
   color: #3f8ce8;
@@ -3586,6 +3721,10 @@ i {
 .bi-list-item-active2:active .bi-input {
   color: #3f8ce8;
 }
+.bi-list-item-active2.active .bi-textarea,
+.bi-list-item-active2:active .bi-textarea {
+  color: #3f8ce8;
+}
 .bi-list-item-active2.disabled,
 .bi-list-item-active2.disabled:hover,
 .bi-list-item-active2.disabled:active {
@@ -3597,6 +3736,11 @@ i {
 .bi-list-item-active2.disabled:active .bi-input {
   color: #cccccc !important;
 }
+.bi-list-item-active2.disabled .bi-textarea,
+.bi-list-item-active2.disabled:hover .bi-textarea,
+.bi-list-item-active2.disabled:active .bi-textarea {
+  color: #cccccc !important;
+}
 .bi-list-item-active2.disabled .bi-high-light,
 .bi-list-item-active2.disabled:hover .bi-high-light,
 .bi-list-item-active2.disabled:active .bi-high-light {
@@ -3611,6 +3755,10 @@ i {
 .bi-theme-dark .bi-list-item-active2.hover .bi-input {
   color: #ffffff;
 }
+.bi-theme-dark .bi-list-item-active2:hover .bi-textarea,
+.bi-theme-dark .bi-list-item-active2.hover .bi-textarea {
+  color: #ffffff;
+}
 .bi-theme-dark .bi-list-item-active2.active,
 .bi-theme-dark .bi-list-item-active2:active {
   color: #3f8ce8;
@@ -3620,6 +3768,10 @@ i {
 .bi-theme-dark .bi-list-item-active2:active .bi-input {
   color: #3f8ce8;
 }
+.bi-theme-dark .bi-list-item-active2.active .bi-textarea,
+.bi-theme-dark .bi-list-item-active2:active .bi-textarea {
+  color: #3f8ce8;
+}
 .bi-theme-dark .bi-list-item-active2.disabled,
 .bi-theme-dark .bi-list-item-active2.disabled:hover,
 .bi-theme-dark .bi-list-item-active2.disabled:active {
@@ -3631,6 +3783,11 @@ i {
 .bi-theme-dark .bi-list-item-active2.disabled:active .bi-input {
   color: #666666 !important;
 }
+.bi-theme-dark .bi-list-item-active2.disabled .bi-textarea,
+.bi-theme-dark .bi-list-item-active2.disabled:hover .bi-textarea,
+.bi-theme-dark .bi-list-item-active2.disabled:active .bi-textarea {
+  color: #666666 !important;
+}
 .bi-theme-dark .bi-list-item-active2.disabled .bi-high-light,
 .bi-theme-dark .bi-list-item-active2.disabled:hover .bi-high-light,
 .bi-theme-dark .bi-list-item-active2.disabled:active .bi-high-light {
@@ -3646,6 +3803,10 @@ i {
 .bi-list-item-select.hover .bi-input {
   color: #1a1a1a;
 }
+.bi-list-item-select:hover .bi-textarea,
+.bi-list-item-select.hover .bi-textarea {
+  color: #1a1a1a;
+}
 .bi-list-item-select:active,
 .bi-list-item-select.active {
   color: #ffffff;
@@ -3655,6 +3816,10 @@ i {
 .bi-list-item-select.active .bi-input {
   color: #ffffff;
 }
+.bi-list-item-select:active .bi-textarea,
+.bi-list-item-select.active .bi-textarea {
+  color: #ffffff;
+}
 .bi-list-item-select:active .bi-high-light,
 .bi-list-item-select.active .bi-high-light {
   color: #ffffff;
@@ -3670,6 +3835,11 @@ i {
 .bi-list-item-select.disabled:active .bi-input {
   color: #cccccc !important;
 }
+.bi-list-item-select.disabled .bi-textarea,
+.bi-list-item-select.disabled:hover .bi-textarea,
+.bi-list-item-select.disabled:active .bi-textarea {
+  color: #cccccc !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 {
@@ -3685,6 +3855,10 @@ i {
 .bi-theme-dark .bi-list-item-select.hover .bi-input {
   color: #ffffff;
 }
+.bi-theme-dark .bi-list-item-select:hover .bi-textarea,
+.bi-theme-dark .bi-list-item-select.hover .bi-textarea {
+  color: #ffffff;
+}
 .bi-theme-dark .bi-list-item-select:active,
 .bi-theme-dark .bi-list-item-select.active {
   color: #ffffff;
@@ -3694,6 +3868,10 @@ i {
 .bi-theme-dark .bi-list-item-select.active .bi-input {
   color: #ffffff;
 }
+.bi-theme-dark .bi-list-item-select:active .bi-textarea,
+.bi-theme-dark .bi-list-item-select.active .bi-textarea {
+  color: #ffffff;
+}
 .bi-theme-dark .bi-list-item-select:active .bi-high-light,
 .bi-theme-dark .bi-list-item-select.active .bi-high-light {
   color: #ffffff;
@@ -3709,6 +3887,11 @@ i {
 .bi-theme-dark .bi-list-item-select.disabled:active .bi-input {
   color: #666666 !important;
 }
+.bi-theme-dark .bi-list-item-select.disabled .bi-textarea,
+.bi-theme-dark .bi-list-item-select.disabled:hover .bi-textarea,
+.bi-theme-dark .bi-list-item-select.disabled:active .bi-textarea {
+  color: #666666 !important;
+}
 .bi-theme-dark .bi-list-item-select.disabled .bi-high-light,
 .bi-theme-dark .bi-list-item-select.disabled:hover .bi-high-light,
 .bi-theme-dark .bi-list-item-select.disabled:active .bi-high-light {
@@ -3723,6 +3906,10 @@ i {
 .bi-list-item-none.hover .bi-input {
   color: inherit;
 }
+.bi-list-item-none:hover .bi-textarea,
+.bi-list-item-none.hover .bi-textarea {
+  color: inherit;
+}
 .bi-list-item-none:active,
 .bi-list-item-none.active {
   color: inherit;
@@ -3732,6 +3919,10 @@ i {
 .bi-list-item-none.active .bi-input {
   color: inherit;
 }
+.bi-list-item-none:active .bi-textarea,
+.bi-list-item-none.active .bi-textarea {
+  color: inherit;
+}
 .bi-list-item-none:active .bi-high-light,
 .bi-list-item-none.active .bi-high-light {
   color: inherit;
@@ -3747,6 +3938,11 @@ i {
 .bi-list-item-none.disabled:active .bi-input {
   color: #cccccc !important;
 }
+.bi-list-item-none.disabled .bi-textarea,
+.bi-list-item-none.disabled:hover .bi-textarea,
+.bi-list-item-none.disabled:active .bi-textarea {
+  color: #cccccc !important;
+}
 .bi-list-item-none.disabled .bi-high-light,
 .bi-list-item-none.disabled:hover .bi-high-light,
 .bi-list-item-none.disabled:active .bi-high-light {
@@ -3761,6 +3957,10 @@ i {
 .bi-theme-dark .bi-list-item-none.hover .bi-input {
   color: inherit;
 }
+.bi-theme-dark .bi-list-item-none:hover .bi-textarea,
+.bi-theme-dark .bi-list-item-none.hover .bi-textarea {
+  color: inherit;
+}
 .bi-theme-dark .bi-list-item-none:active,
 .bi-theme-dark .bi-list-item-none.active {
   color: inherit;
@@ -3770,6 +3970,10 @@ i {
 .bi-theme-dark .bi-list-item-none.active .bi-input {
   color: inherit;
 }
+.bi-theme-dark .bi-list-item-none:active .bi-textarea,
+.bi-theme-dark .bi-list-item-none.active .bi-textarea {
+  color: inherit;
+}
 .bi-theme-dark .bi-list-item-none:active .bi-high-light,
 .bi-theme-dark .bi-list-item-none.active .bi-high-light {
   color: inherit;
@@ -3785,6 +3989,11 @@ i {
 .bi-theme-dark .bi-list-item-none.disabled:active .bi-input {
   color: #666666 !important;
 }
+.bi-theme-dark .bi-list-item-none.disabled .bi-textarea,
+.bi-theme-dark .bi-list-item-none.disabled:hover .bi-textarea,
+.bi-theme-dark .bi-list-item-none.disabled:active .bi-textarea {
+  color: #666666 !important;
+}
 .bi-theme-dark .bi-list-item-none.disabled .bi-high-light,
 .bi-theme-dark .bi-list-item-none.disabled:hover .bi-high-light,
 .bi-theme-dark .bi-list-item-none.disabled:active .bi-high-light {
diff --git a/docs/base.js b/docs/base.js
index 2cf4c5e2e2..e478a6fa47 100644
--- a/docs/base.js
+++ b/docs/base.js
@@ -18335,7 +18335,7 @@ BI.TextAreaEditor = BI.inherit(BI.Single, {
             tagName: "textarea",
             width: "100%",
             height: "100%",
-            cls: "textarea-editor-content display-block"
+            cls: "bi-textarea textarea-editor-content display-block"
         });
         this.content.element.css({"resize": "none"});
         BI.createWidget({
diff --git a/docs/core.css b/docs/core.css
index a77c93b59f..1517944011 100644
--- a/docs/core.css
+++ b/docs/core.css
@@ -3181,6 +3181,9 @@ i {
 .base-disabled .bi-input {
   color: #cccccc !important;
 }
+.base-disabled .bi-textarea {
+  color: #cccccc !important;
+}
 .base-disabled .b-font:before {
   color: #cccccc !important;
 }
@@ -3190,6 +3193,9 @@ i {
 .bi-theme-dark .base-disabled .bi-input {
   color: #666666 !important;
 }
+.bi-theme-dark .base-disabled .bi-textarea {
+  color: #666666 !important;
+}
 .bi-theme-dark .base-disabled .b-font:before {
   color: #666666 !important;
 }
@@ -3215,6 +3221,9 @@ i {
 .bi-background .bi-input {
   color: #666666;
 }
+.bi-background .bi-textarea {
+  color: #666666;
+}
 .bi-theme-dark .bi-background {
   background-color: #191b2b;
   color: #cccccc;
@@ -3222,6 +3231,9 @@ i {
 .bi-theme-dark .bi-background .bi-input {
   color: #cccccc;
 }
+.bi-theme-dark .bi-background .bi-textarea {
+  color: #cccccc;
+}
 .bi-card {
   background-color: #ffffff;
   color: #666666;
@@ -3229,6 +3241,9 @@ i {
 .bi-card .bi-input {
   color: #666666;
 }
+.bi-card .bi-textarea {
+  color: #666666;
+}
 .bi-theme-dark .bi-card {
   background-color: #242640;
   color: #cccccc;
@@ -3236,24 +3251,36 @@ i {
 .bi-theme-dark .bi-card .bi-input {
   color: #cccccc;
 }
+.bi-theme-dark .bi-card .bi-textarea {
+  color: #cccccc;
+}
 .bi-disabled {
   color: #cccccc;
 }
 .bi-disabled .bi-input {
   color: #cccccc;
 }
+.bi-disabled .bi-textarea {
+  color: #cccccc;
+}
 .bi-theme-dark .bi-disabled {
   color: #666666;
 }
 .bi-theme-dark .bi-disabled .bi-input {
   color: #666666;
 }
+.bi-theme-dark .bi-disabled .bi-textarea {
+  color: #666666;
+}
 .bi-tips {
   color: #999999;
 }
 .bi-tips .bi-input {
   color: #999999;
 }
+.bi-tips .bi-textarea {
+  color: #999999;
+}
 .bi-border {
   border: 1px solid #d4dadd;
 }
@@ -3290,12 +3317,18 @@ i {
 .bi-keyword-red-mark .bi-input {
   color: #f07d0a;
 }
+.bi-keyword-red-mark .bi-textarea {
+  color: #f07d0a;
+}
 .bi-high-light {
   color: #3f8ce8;
 }
 .bi-high-light .bi-input {
   color: #3f8ce8;
 }
+.bi-high-light .bi-textarea {
+  color: #3f8ce8;
+}
 .bi-high-light-background {
   background-color: #3f8ce8;
   color: #ffffff;
@@ -3303,6 +3336,9 @@ i {
 .bi-high-light-background .bi-input {
   color: #ffffff;
 }
+.bi-high-light-background .bi-textarea {
+  color: #ffffff;
+}
 .bi-high-light-border {
   border-color: #178cdf;
 }
@@ -3313,12 +3349,18 @@ i {
 .bi-water-mark .bi-input {
   color: #cccccc;
 }
+.bi-water-mark .bi-textarea {
+  color: #cccccc;
+}
 .bi-theme-dark .bi-water-mark {
   color: #666666;
 }
 .bi-theme-dark .bi-water-mark .bi-input {
   color: #666666;
 }
+.bi-theme-dark .bi-water-mark .bi-textarea {
+  color: #666666;
+}
 .bi-resizer {
   background: #1a1a1a;
   opacity: 0.2;
@@ -3336,6 +3378,9 @@ i {
 .bi-mask .bi-input {
   color: #ffffff;
 }
+.bi-mask .bi-textarea {
+  color: #ffffff;
+}
 .bi-theme-dark .bi-mask {
   color: #242640;
   background-color: rgba(255, 255, 255, 0.2);
@@ -3344,6 +3389,9 @@ i {
 .bi-theme-dark .bi-mask .bi-input {
   color: #242640;
 }
+.bi-theme-dark .bi-mask .bi-textarea {
+  color: #242640;
+}
 .bi-z-index-mask {
   color: #ffffff;
   background-color: rgba(26, 26, 26, 0.5);
@@ -3352,6 +3400,9 @@ i {
 .bi-z-index-mask .bi-input {
   color: #ffffff;
 }
+.bi-z-index-mask .bi-textarea {
+  color: #ffffff;
+}
 .bi-list-item:hover,
 .bi-list-item.hover {
   color: #1a1a1a;
@@ -3362,6 +3413,10 @@ i {
 .bi-list-item.hover .bi-input {
   color: #1a1a1a;
 }
+.bi-list-item:hover .bi-textarea,
+.bi-list-item.hover .bi-textarea {
+  color: #1a1a1a;
+}
 .bi-list-item.disabled,
 .bi-list-item.disabled:hover,
 .bi-list-item.disabled:active {
@@ -3373,6 +3428,11 @@ i {
 .bi-list-item.disabled:active .bi-input {
   color: #cccccc !important;
 }
+.bi-list-item.disabled .bi-textarea,
+.bi-list-item.disabled:hover .bi-textarea,
+.bi-list-item.disabled:active .bi-textarea {
+  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 {
@@ -3388,6 +3448,10 @@ i {
 .bi-theme-dark .bi-list-item.hover .bi-input {
   color: #ffffff;
 }
+.bi-theme-dark .bi-list-item:hover .bi-textarea,
+.bi-theme-dark .bi-list-item.hover .bi-textarea {
+  color: #ffffff;
+}
 .bi-theme-dark .bi-list-item.disabled,
 .bi-theme-dark .bi-list-item.disabled:hover,
 .bi-theme-dark .bi-list-item.disabled:active {
@@ -3399,6 +3463,11 @@ i {
 .bi-theme-dark .bi-list-item.disabled:active .bi-input {
   color: #666666 !important;
 }
+.bi-theme-dark .bi-list-item.disabled .bi-textarea,
+.bi-theme-dark .bi-list-item.disabled:hover .bi-textarea,
+.bi-theme-dark .bi-list-item.disabled:active .bi-textarea {
+  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 {
@@ -3414,6 +3483,9 @@ i {
 .bi-list-item-simple .bi-input {
   color: #999999;
 }
+.bi-list-item-simple .bi-textarea {
+  color: #999999;
+}
 .bi-list-item-simple:hover,
 .bi-list-item-simple.hover {
   color: #3f8ce8;
@@ -3422,6 +3494,10 @@ i {
 .bi-list-item-simple.hover .bi-input {
   color: #3f8ce8;
 }
+.bi-list-item-simple:hover .bi-textarea,
+.bi-list-item-simple.hover .bi-textarea {
+  color: #3f8ce8;
+}
 .bi-list-item-simple.disabled,
 .bi-list-item-simple.disabled:hover,
 .bi-list-item-simple.disabled:active {
@@ -3432,6 +3508,11 @@ i {
 .bi-list-item-simple.disabled:active .bi-input {
   color: #cccccc !important;
 }
+.bi-list-item-simple.disabled .bi-textarea,
+.bi-list-item-simple.disabled:hover .bi-textarea,
+.bi-list-item-simple.disabled:active .bi-textarea {
+  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 {
@@ -3443,6 +3524,9 @@ i {
 .bi-list-item-effect:hover .bi-input {
   color: #1a1a1a;
 }
+.bi-list-item-effect:hover .bi-textarea {
+  color: #1a1a1a;
+}
 .bi-list-item-effect.active,
 .bi-list-item-effect:active {
   color: #3f8ce8;
@@ -3451,6 +3535,10 @@ i {
 .bi-list-item-effect:active .bi-input {
   color: #3f8ce8;
 }
+.bi-list-item-effect.active .bi-textarea,
+.bi-list-item-effect:active .bi-textarea {
+  color: #3f8ce8;
+}
 .bi-list-item-effect.disabled,
 .bi-list-item-effect.disabled:hover,
 .bi-list-item-effect.disabled:active {
@@ -3461,6 +3549,11 @@ i {
 .bi-list-item-effect.disabled:active .bi-input {
   color: #cccccc !important;
 }
+.bi-list-item-effect.disabled .bi-textarea,
+.bi-list-item-effect.disabled:hover .bi-textarea,
+.bi-list-item-effect.disabled:active .bi-textarea {
+  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 {
@@ -3472,6 +3565,9 @@ i {
 .bi-theme-dark .bi-list-item-effect:hover .bi-input {
   color: #ffffff;
 }
+.bi-theme-dark .bi-list-item-effect:hover .bi-textarea {
+  color: #ffffff;
+}
 .bi-theme-dark .bi-list-item-effect.active,
 .bi-theme-dark .bi-list-item-effect:active {
   color: #3f8ce8;
@@ -3480,6 +3576,10 @@ i {
 .bi-theme-dark .bi-list-item-effect:active .bi-input {
   color: #3f8ce8;
 }
+.bi-theme-dark .bi-list-item-effect.active .bi-textarea,
+.bi-theme-dark .bi-list-item-effect:active .bi-textarea {
+  color: #3f8ce8;
+}
 .bi-theme-dark .bi-list-item-effect.disabled,
 .bi-theme-dark .bi-list-item-effect.disabled:hover,
 .bi-theme-dark .bi-list-item-effect.disabled:active {
@@ -3491,6 +3591,11 @@ i {
 .bi-theme-dark .bi-list-item-effect.disabled:active .bi-input {
   color: #666666 !important;
 }
+.bi-theme-dark .bi-list-item-effect.disabled .bi-textarea,
+.bi-theme-dark .bi-list-item-effect.disabled:hover .bi-textarea,
+.bi-theme-dark .bi-list-item-effect.disabled:active .bi-textarea {
+  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 {
@@ -3506,6 +3611,10 @@ i {
 .bi-list-item-active.hover .bi-input {
   color: #1a1a1a;
 }
+.bi-list-item-active:hover .bi-textarea,
+.bi-list-item-active.hover .bi-textarea {
+  color: #1a1a1a;
+}
 .bi-list-item-active.active,
 .bi-list-item-active:active {
   color: #3f8ce8;
@@ -3516,6 +3625,10 @@ i {
 .bi-list-item-active:active .bi-input {
   color: #3f8ce8;
 }
+.bi-list-item-active.active .bi-textarea,
+.bi-list-item-active:active .bi-textarea {
+  color: #3f8ce8;
+}
 .bi-list-item-active.disabled,
 .bi-list-item-active.disabled:hover,
 .bi-list-item-active.disabled:active {
@@ -3527,6 +3640,11 @@ i {
 .bi-list-item-active.disabled:active .bi-input {
   color: #cccccc !important;
 }
+.bi-list-item-active.disabled .bi-textarea,
+.bi-list-item-active.disabled:hover .bi-textarea,
+.bi-list-item-active.disabled:active .bi-textarea {
+  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 {
@@ -3542,6 +3660,10 @@ i {
 .bi-theme-dark .bi-list-item-active.hover .bi-input {
   color: #ffffff;
 }
+.bi-theme-dark .bi-list-item-active:hover .bi-textarea,
+.bi-theme-dark .bi-list-item-active.hover .bi-textarea {
+  color: #ffffff;
+}
 .bi-theme-dark .bi-list-item-active.active,
 .bi-theme-dark .bi-list-item-active:active {
   color: #3f8ce8;
@@ -3552,6 +3674,10 @@ i {
 .bi-theme-dark .bi-list-item-active:active .bi-input {
   color: #3f8ce8;
 }
+.bi-theme-dark .bi-list-item-active.active .bi-textarea,
+.bi-theme-dark .bi-list-item-active:active .bi-textarea {
+  color: #3f8ce8;
+}
 .bi-theme-dark .bi-list-item-active.disabled,
 .bi-theme-dark .bi-list-item-active.disabled:hover,
 .bi-theme-dark .bi-list-item-active.disabled:active {
@@ -3563,6 +3689,11 @@ i {
 .bi-theme-dark .bi-list-item-active.disabled:active .bi-input {
   color: #666666 !important;
 }
+.bi-theme-dark .bi-list-item-active.disabled .bi-textarea,
+.bi-theme-dark .bi-list-item-active.disabled:hover .bi-textarea,
+.bi-theme-dark .bi-list-item-active.disabled:active .bi-textarea {
+  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 {
@@ -3577,6 +3708,10 @@ i {
 .bi-list-item-active2.hover .bi-input {
   color: #1a1a1a;
 }
+.bi-list-item-active2:hover .bi-textarea,
+.bi-list-item-active2.hover .bi-textarea {
+  color: #1a1a1a;
+}
 .bi-list-item-active2.active,
 .bi-list-item-active2:active {
   color: #3f8ce8;
@@ -3586,6 +3721,10 @@ i {
 .bi-list-item-active2:active .bi-input {
   color: #3f8ce8;
 }
+.bi-list-item-active2.active .bi-textarea,
+.bi-list-item-active2:active .bi-textarea {
+  color: #3f8ce8;
+}
 .bi-list-item-active2.disabled,
 .bi-list-item-active2.disabled:hover,
 .bi-list-item-active2.disabled:active {
@@ -3597,6 +3736,11 @@ i {
 .bi-list-item-active2.disabled:active .bi-input {
   color: #cccccc !important;
 }
+.bi-list-item-active2.disabled .bi-textarea,
+.bi-list-item-active2.disabled:hover .bi-textarea,
+.bi-list-item-active2.disabled:active .bi-textarea {
+  color: #cccccc !important;
+}
 .bi-list-item-active2.disabled .bi-high-light,
 .bi-list-item-active2.disabled:hover .bi-high-light,
 .bi-list-item-active2.disabled:active .bi-high-light {
@@ -3611,6 +3755,10 @@ i {
 .bi-theme-dark .bi-list-item-active2.hover .bi-input {
   color: #ffffff;
 }
+.bi-theme-dark .bi-list-item-active2:hover .bi-textarea,
+.bi-theme-dark .bi-list-item-active2.hover .bi-textarea {
+  color: #ffffff;
+}
 .bi-theme-dark .bi-list-item-active2.active,
 .bi-theme-dark .bi-list-item-active2:active {
   color: #3f8ce8;
@@ -3620,6 +3768,10 @@ i {
 .bi-theme-dark .bi-list-item-active2:active .bi-input {
   color: #3f8ce8;
 }
+.bi-theme-dark .bi-list-item-active2.active .bi-textarea,
+.bi-theme-dark .bi-list-item-active2:active .bi-textarea {
+  color: #3f8ce8;
+}
 .bi-theme-dark .bi-list-item-active2.disabled,
 .bi-theme-dark .bi-list-item-active2.disabled:hover,
 .bi-theme-dark .bi-list-item-active2.disabled:active {
@@ -3631,6 +3783,11 @@ i {
 .bi-theme-dark .bi-list-item-active2.disabled:active .bi-input {
   color: #666666 !important;
 }
+.bi-theme-dark .bi-list-item-active2.disabled .bi-textarea,
+.bi-theme-dark .bi-list-item-active2.disabled:hover .bi-textarea,
+.bi-theme-dark .bi-list-item-active2.disabled:active .bi-textarea {
+  color: #666666 !important;
+}
 .bi-theme-dark .bi-list-item-active2.disabled .bi-high-light,
 .bi-theme-dark .bi-list-item-active2.disabled:hover .bi-high-light,
 .bi-theme-dark .bi-list-item-active2.disabled:active .bi-high-light {
@@ -3646,6 +3803,10 @@ i {
 .bi-list-item-select.hover .bi-input {
   color: #1a1a1a;
 }
+.bi-list-item-select:hover .bi-textarea,
+.bi-list-item-select.hover .bi-textarea {
+  color: #1a1a1a;
+}
 .bi-list-item-select:active,
 .bi-list-item-select.active {
   color: #ffffff;
@@ -3655,6 +3816,10 @@ i {
 .bi-list-item-select.active .bi-input {
   color: #ffffff;
 }
+.bi-list-item-select:active .bi-textarea,
+.bi-list-item-select.active .bi-textarea {
+  color: #ffffff;
+}
 .bi-list-item-select:active .bi-high-light,
 .bi-list-item-select.active .bi-high-light {
   color: #ffffff;
@@ -3670,6 +3835,11 @@ i {
 .bi-list-item-select.disabled:active .bi-input {
   color: #cccccc !important;
 }
+.bi-list-item-select.disabled .bi-textarea,
+.bi-list-item-select.disabled:hover .bi-textarea,
+.bi-list-item-select.disabled:active .bi-textarea {
+  color: #cccccc !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 {
@@ -3685,6 +3855,10 @@ i {
 .bi-theme-dark .bi-list-item-select.hover .bi-input {
   color: #ffffff;
 }
+.bi-theme-dark .bi-list-item-select:hover .bi-textarea,
+.bi-theme-dark .bi-list-item-select.hover .bi-textarea {
+  color: #ffffff;
+}
 .bi-theme-dark .bi-list-item-select:active,
 .bi-theme-dark .bi-list-item-select.active {
   color: #ffffff;
@@ -3694,6 +3868,10 @@ i {
 .bi-theme-dark .bi-list-item-select.active .bi-input {
   color: #ffffff;
 }
+.bi-theme-dark .bi-list-item-select:active .bi-textarea,
+.bi-theme-dark .bi-list-item-select.active .bi-textarea {
+  color: #ffffff;
+}
 .bi-theme-dark .bi-list-item-select:active .bi-high-light,
 .bi-theme-dark .bi-list-item-select.active .bi-high-light {
   color: #ffffff;
@@ -3709,6 +3887,11 @@ i {
 .bi-theme-dark .bi-list-item-select.disabled:active .bi-input {
   color: #666666 !important;
 }
+.bi-theme-dark .bi-list-item-select.disabled .bi-textarea,
+.bi-theme-dark .bi-list-item-select.disabled:hover .bi-textarea,
+.bi-theme-dark .bi-list-item-select.disabled:active .bi-textarea {
+  color: #666666 !important;
+}
 .bi-theme-dark .bi-list-item-select.disabled .bi-high-light,
 .bi-theme-dark .bi-list-item-select.disabled:hover .bi-high-light,
 .bi-theme-dark .bi-list-item-select.disabled:active .bi-high-light {
@@ -3723,6 +3906,10 @@ i {
 .bi-list-item-none.hover .bi-input {
   color: inherit;
 }
+.bi-list-item-none:hover .bi-textarea,
+.bi-list-item-none.hover .bi-textarea {
+  color: inherit;
+}
 .bi-list-item-none:active,
 .bi-list-item-none.active {
   color: inherit;
@@ -3732,6 +3919,10 @@ i {
 .bi-list-item-none.active .bi-input {
   color: inherit;
 }
+.bi-list-item-none:active .bi-textarea,
+.bi-list-item-none.active .bi-textarea {
+  color: inherit;
+}
 .bi-list-item-none:active .bi-high-light,
 .bi-list-item-none.active .bi-high-light {
   color: inherit;
@@ -3747,6 +3938,11 @@ i {
 .bi-list-item-none.disabled:active .bi-input {
   color: #cccccc !important;
 }
+.bi-list-item-none.disabled .bi-textarea,
+.bi-list-item-none.disabled:hover .bi-textarea,
+.bi-list-item-none.disabled:active .bi-textarea {
+  color: #cccccc !important;
+}
 .bi-list-item-none.disabled .bi-high-light,
 .bi-list-item-none.disabled:hover .bi-high-light,
 .bi-list-item-none.disabled:active .bi-high-light {
@@ -3761,6 +3957,10 @@ i {
 .bi-theme-dark .bi-list-item-none.hover .bi-input {
   color: inherit;
 }
+.bi-theme-dark .bi-list-item-none:hover .bi-textarea,
+.bi-theme-dark .bi-list-item-none.hover .bi-textarea {
+  color: inherit;
+}
 .bi-theme-dark .bi-list-item-none:active,
 .bi-theme-dark .bi-list-item-none.active {
   color: inherit;
@@ -3770,6 +3970,10 @@ i {
 .bi-theme-dark .bi-list-item-none.active .bi-input {
   color: inherit;
 }
+.bi-theme-dark .bi-list-item-none:active .bi-textarea,
+.bi-theme-dark .bi-list-item-none.active .bi-textarea {
+  color: inherit;
+}
 .bi-theme-dark .bi-list-item-none:active .bi-high-light,
 .bi-theme-dark .bi-list-item-none.active .bi-high-light {
   color: inherit;
@@ -3785,6 +3989,11 @@ i {
 .bi-theme-dark .bi-list-item-none.disabled:active .bi-input {
   color: #666666 !important;
 }
+.bi-theme-dark .bi-list-item-none.disabled .bi-textarea,
+.bi-theme-dark .bi-list-item-none.disabled:hover .bi-textarea,
+.bi-theme-dark .bi-list-item-none.disabled:active .bi-textarea {
+  color: #666666 !important;
+}
 .bi-theme-dark .bi-list-item-none.disabled .bi-high-light,
 .bi-theme-dark .bi-list-item-none.disabled:hover .bi-high-light,
 .bi-theme-dark .bi-list-item-none.disabled:active .bi-high-light {
diff --git a/src/base/single/editor/editor.textarea.js b/src/base/single/editor/editor.textarea.js
index 5efc3fae55..7b424bab15 100644
--- a/src/base/single/editor/editor.textarea.js
+++ b/src/base/single/editor/editor.textarea.js
@@ -19,7 +19,7 @@ BI.TextAreaEditor = BI.inherit(BI.Single, {
             tagName: "textarea",
             width: "100%",
             height: "100%",
-            cls: "textarea-editor-content display-block"
+            cls: "bi-textarea textarea-editor-content display-block"
         });
         this.content.element.css({"resize": "none"});
         BI.createWidget({
diff --git a/src/css/core/utils/common.css b/src/css/core/utils/common.css
index 0d10234d9a..f362b482d0 100644
--- a/src/css/core/utils/common.css
+++ b/src/css/core/utils/common.css
@@ -5,6 +5,9 @@
 .base-disabled .bi-input {
   color: #cccccc !important;
 }
+.base-disabled .bi-textarea {
+  color: #cccccc !important;
+}
 .base-disabled .b-font:before {
   color: #cccccc !important;
 }
@@ -14,6 +17,9 @@
 .bi-theme-dark .base-disabled .bi-input {
   color: #666666 !important;
 }
+.bi-theme-dark .base-disabled .bi-textarea {
+  color: #666666 !important;
+}
 .bi-theme-dark .base-disabled .b-font:before {
   color: #666666 !important;
 }
@@ -39,6 +45,9 @@
 .bi-background .bi-input {
   color: #666666;
 }
+.bi-background .bi-textarea {
+  color: #666666;
+}
 .bi-theme-dark .bi-background {
   background-color: #191b2b;
   color: #cccccc;
@@ -46,6 +55,9 @@
 .bi-theme-dark .bi-background .bi-input {
   color: #cccccc;
 }
+.bi-theme-dark .bi-background .bi-textarea {
+  color: #cccccc;
+}
 .bi-card {
   background-color: #ffffff;
   color: #666666;
@@ -53,6 +65,9 @@
 .bi-card .bi-input {
   color: #666666;
 }
+.bi-card .bi-textarea {
+  color: #666666;
+}
 .bi-theme-dark .bi-card {
   background-color: #242640;
   color: #cccccc;
@@ -60,24 +75,36 @@
 .bi-theme-dark .bi-card .bi-input {
   color: #cccccc;
 }
+.bi-theme-dark .bi-card .bi-textarea {
+  color: #cccccc;
+}
 .bi-disabled {
   color: #cccccc;
 }
 .bi-disabled .bi-input {
   color: #cccccc;
 }
+.bi-disabled .bi-textarea {
+  color: #cccccc;
+}
 .bi-theme-dark .bi-disabled {
   color: #666666;
 }
 .bi-theme-dark .bi-disabled .bi-input {
   color: #666666;
 }
+.bi-theme-dark .bi-disabled .bi-textarea {
+  color: #666666;
+}
 .bi-tips {
   color: #999999;
 }
 .bi-tips .bi-input {
   color: #999999;
 }
+.bi-tips .bi-textarea {
+  color: #999999;
+}
 .bi-border {
   border: 1px solid #d4dadd;
 }
@@ -114,12 +141,18 @@
 .bi-keyword-red-mark .bi-input {
   color: #f07d0a;
 }
+.bi-keyword-red-mark .bi-textarea {
+  color: #f07d0a;
+}
 .bi-high-light {
   color: #3f8ce8;
 }
 .bi-high-light .bi-input {
   color: #3f8ce8;
 }
+.bi-high-light .bi-textarea {
+  color: #3f8ce8;
+}
 .bi-high-light-background {
   background-color: #3f8ce8;
   color: #ffffff;
@@ -127,6 +160,9 @@
 .bi-high-light-background .bi-input {
   color: #ffffff;
 }
+.bi-high-light-background .bi-textarea {
+  color: #ffffff;
+}
 .bi-high-light-border {
   border-color: #178cdf;
 }
@@ -137,12 +173,18 @@
 .bi-water-mark .bi-input {
   color: #cccccc;
 }
+.bi-water-mark .bi-textarea {
+  color: #cccccc;
+}
 .bi-theme-dark .bi-water-mark {
   color: #666666;
 }
 .bi-theme-dark .bi-water-mark .bi-input {
   color: #666666;
 }
+.bi-theme-dark .bi-water-mark .bi-textarea {
+  color: #666666;
+}
 .bi-resizer {
   background: #1a1a1a;
   opacity: 0.2;
@@ -160,6 +202,9 @@
 .bi-mask .bi-input {
   color: #ffffff;
 }
+.bi-mask .bi-textarea {
+  color: #ffffff;
+}
 .bi-theme-dark .bi-mask {
   color: #242640;
   background-color: rgba(255, 255, 255, 0.2);
@@ -168,6 +213,9 @@
 .bi-theme-dark .bi-mask .bi-input {
   color: #242640;
 }
+.bi-theme-dark .bi-mask .bi-textarea {
+  color: #242640;
+}
 .bi-z-index-mask {
   color: #ffffff;
   background-color: rgba(26, 26, 26, 0.5);
@@ -176,6 +224,9 @@
 .bi-z-index-mask .bi-input {
   color: #ffffff;
 }
+.bi-z-index-mask .bi-textarea {
+  color: #ffffff;
+}
 .bi-list-item:hover,
 .bi-list-item.hover {
   color: #1a1a1a;
@@ -186,6 +237,10 @@
 .bi-list-item.hover .bi-input {
   color: #1a1a1a;
 }
+.bi-list-item:hover .bi-textarea,
+.bi-list-item.hover .bi-textarea {
+  color: #1a1a1a;
+}
 .bi-list-item.disabled,
 .bi-list-item.disabled:hover,
 .bi-list-item.disabled:active {
@@ -197,6 +252,11 @@
 .bi-list-item.disabled:active .bi-input {
   color: #cccccc !important;
 }
+.bi-list-item.disabled .bi-textarea,
+.bi-list-item.disabled:hover .bi-textarea,
+.bi-list-item.disabled:active .bi-textarea {
+  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 {
@@ -212,6 +272,10 @@
 .bi-theme-dark .bi-list-item.hover .bi-input {
   color: #ffffff;
 }
+.bi-theme-dark .bi-list-item:hover .bi-textarea,
+.bi-theme-dark .bi-list-item.hover .bi-textarea {
+  color: #ffffff;
+}
 .bi-theme-dark .bi-list-item.disabled,
 .bi-theme-dark .bi-list-item.disabled:hover,
 .bi-theme-dark .bi-list-item.disabled:active {
@@ -223,6 +287,11 @@
 .bi-theme-dark .bi-list-item.disabled:active .bi-input {
   color: #666666 !important;
 }
+.bi-theme-dark .bi-list-item.disabled .bi-textarea,
+.bi-theme-dark .bi-list-item.disabled:hover .bi-textarea,
+.bi-theme-dark .bi-list-item.disabled:active .bi-textarea {
+  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 {
@@ -238,6 +307,9 @@
 .bi-list-item-simple .bi-input {
   color: #999999;
 }
+.bi-list-item-simple .bi-textarea {
+  color: #999999;
+}
 .bi-list-item-simple:hover,
 .bi-list-item-simple.hover {
   color: #3f8ce8;
@@ -246,6 +318,10 @@
 .bi-list-item-simple.hover .bi-input {
   color: #3f8ce8;
 }
+.bi-list-item-simple:hover .bi-textarea,
+.bi-list-item-simple.hover .bi-textarea {
+  color: #3f8ce8;
+}
 .bi-list-item-simple.disabled,
 .bi-list-item-simple.disabled:hover,
 .bi-list-item-simple.disabled:active {
@@ -256,6 +332,11 @@
 .bi-list-item-simple.disabled:active .bi-input {
   color: #cccccc !important;
 }
+.bi-list-item-simple.disabled .bi-textarea,
+.bi-list-item-simple.disabled:hover .bi-textarea,
+.bi-list-item-simple.disabled:active .bi-textarea {
+  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 {
@@ -267,6 +348,9 @@
 .bi-list-item-effect:hover .bi-input {
   color: #1a1a1a;
 }
+.bi-list-item-effect:hover .bi-textarea {
+  color: #1a1a1a;
+}
 .bi-list-item-effect.active,
 .bi-list-item-effect:active {
   color: #3f8ce8;
@@ -275,6 +359,10 @@
 .bi-list-item-effect:active .bi-input {
   color: #3f8ce8;
 }
+.bi-list-item-effect.active .bi-textarea,
+.bi-list-item-effect:active .bi-textarea {
+  color: #3f8ce8;
+}
 .bi-list-item-effect.disabled,
 .bi-list-item-effect.disabled:hover,
 .bi-list-item-effect.disabled:active {
@@ -285,6 +373,11 @@
 .bi-list-item-effect.disabled:active .bi-input {
   color: #cccccc !important;
 }
+.bi-list-item-effect.disabled .bi-textarea,
+.bi-list-item-effect.disabled:hover .bi-textarea,
+.bi-list-item-effect.disabled:active .bi-textarea {
+  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 {
@@ -296,6 +389,9 @@
 .bi-theme-dark .bi-list-item-effect:hover .bi-input {
   color: #ffffff;
 }
+.bi-theme-dark .bi-list-item-effect:hover .bi-textarea {
+  color: #ffffff;
+}
 .bi-theme-dark .bi-list-item-effect.active,
 .bi-theme-dark .bi-list-item-effect:active {
   color: #3f8ce8;
@@ -304,6 +400,10 @@
 .bi-theme-dark .bi-list-item-effect:active .bi-input {
   color: #3f8ce8;
 }
+.bi-theme-dark .bi-list-item-effect.active .bi-textarea,
+.bi-theme-dark .bi-list-item-effect:active .bi-textarea {
+  color: #3f8ce8;
+}
 .bi-theme-dark .bi-list-item-effect.disabled,
 .bi-theme-dark .bi-list-item-effect.disabled:hover,
 .bi-theme-dark .bi-list-item-effect.disabled:active {
@@ -315,6 +415,11 @@
 .bi-theme-dark .bi-list-item-effect.disabled:active .bi-input {
   color: #666666 !important;
 }
+.bi-theme-dark .bi-list-item-effect.disabled .bi-textarea,
+.bi-theme-dark .bi-list-item-effect.disabled:hover .bi-textarea,
+.bi-theme-dark .bi-list-item-effect.disabled:active .bi-textarea {
+  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 {
@@ -330,6 +435,10 @@
 .bi-list-item-active.hover .bi-input {
   color: #1a1a1a;
 }
+.bi-list-item-active:hover .bi-textarea,
+.bi-list-item-active.hover .bi-textarea {
+  color: #1a1a1a;
+}
 .bi-list-item-active.active,
 .bi-list-item-active:active {
   color: #3f8ce8;
@@ -340,6 +449,10 @@
 .bi-list-item-active:active .bi-input {
   color: #3f8ce8;
 }
+.bi-list-item-active.active .bi-textarea,
+.bi-list-item-active:active .bi-textarea {
+  color: #3f8ce8;
+}
 .bi-list-item-active.disabled,
 .bi-list-item-active.disabled:hover,
 .bi-list-item-active.disabled:active {
@@ -351,6 +464,11 @@
 .bi-list-item-active.disabled:active .bi-input {
   color: #cccccc !important;
 }
+.bi-list-item-active.disabled .bi-textarea,
+.bi-list-item-active.disabled:hover .bi-textarea,
+.bi-list-item-active.disabled:active .bi-textarea {
+  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 {
@@ -366,6 +484,10 @@
 .bi-theme-dark .bi-list-item-active.hover .bi-input {
   color: #ffffff;
 }
+.bi-theme-dark .bi-list-item-active:hover .bi-textarea,
+.bi-theme-dark .bi-list-item-active.hover .bi-textarea {
+  color: #ffffff;
+}
 .bi-theme-dark .bi-list-item-active.active,
 .bi-theme-dark .bi-list-item-active:active {
   color: #3f8ce8;
@@ -376,6 +498,10 @@
 .bi-theme-dark .bi-list-item-active:active .bi-input {
   color: #3f8ce8;
 }
+.bi-theme-dark .bi-list-item-active.active .bi-textarea,
+.bi-theme-dark .bi-list-item-active:active .bi-textarea {
+  color: #3f8ce8;
+}
 .bi-theme-dark .bi-list-item-active.disabled,
 .bi-theme-dark .bi-list-item-active.disabled:hover,
 .bi-theme-dark .bi-list-item-active.disabled:active {
@@ -387,6 +513,11 @@
 .bi-theme-dark .bi-list-item-active.disabled:active .bi-input {
   color: #666666 !important;
 }
+.bi-theme-dark .bi-list-item-active.disabled .bi-textarea,
+.bi-theme-dark .bi-list-item-active.disabled:hover .bi-textarea,
+.bi-theme-dark .bi-list-item-active.disabled:active .bi-textarea {
+  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 {
@@ -401,6 +532,10 @@
 .bi-list-item-active2.hover .bi-input {
   color: #1a1a1a;
 }
+.bi-list-item-active2:hover .bi-textarea,
+.bi-list-item-active2.hover .bi-textarea {
+  color: #1a1a1a;
+}
 .bi-list-item-active2.active,
 .bi-list-item-active2:active {
   color: #3f8ce8;
@@ -410,6 +545,10 @@
 .bi-list-item-active2:active .bi-input {
   color: #3f8ce8;
 }
+.bi-list-item-active2.active .bi-textarea,
+.bi-list-item-active2:active .bi-textarea {
+  color: #3f8ce8;
+}
 .bi-list-item-active2.disabled,
 .bi-list-item-active2.disabled:hover,
 .bi-list-item-active2.disabled:active {
@@ -421,6 +560,11 @@
 .bi-list-item-active2.disabled:active .bi-input {
   color: #cccccc !important;
 }
+.bi-list-item-active2.disabled .bi-textarea,
+.bi-list-item-active2.disabled:hover .bi-textarea,
+.bi-list-item-active2.disabled:active .bi-textarea {
+  color: #cccccc !important;
+}
 .bi-list-item-active2.disabled .bi-high-light,
 .bi-list-item-active2.disabled:hover .bi-high-light,
 .bi-list-item-active2.disabled:active .bi-high-light {
@@ -435,6 +579,10 @@
 .bi-theme-dark .bi-list-item-active2.hover .bi-input {
   color: #ffffff;
 }
+.bi-theme-dark .bi-list-item-active2:hover .bi-textarea,
+.bi-theme-dark .bi-list-item-active2.hover .bi-textarea {
+  color: #ffffff;
+}
 .bi-theme-dark .bi-list-item-active2.active,
 .bi-theme-dark .bi-list-item-active2:active {
   color: #3f8ce8;
@@ -444,6 +592,10 @@
 .bi-theme-dark .bi-list-item-active2:active .bi-input {
   color: #3f8ce8;
 }
+.bi-theme-dark .bi-list-item-active2.active .bi-textarea,
+.bi-theme-dark .bi-list-item-active2:active .bi-textarea {
+  color: #3f8ce8;
+}
 .bi-theme-dark .bi-list-item-active2.disabled,
 .bi-theme-dark .bi-list-item-active2.disabled:hover,
 .bi-theme-dark .bi-list-item-active2.disabled:active {
@@ -455,6 +607,11 @@
 .bi-theme-dark .bi-list-item-active2.disabled:active .bi-input {
   color: #666666 !important;
 }
+.bi-theme-dark .bi-list-item-active2.disabled .bi-textarea,
+.bi-theme-dark .bi-list-item-active2.disabled:hover .bi-textarea,
+.bi-theme-dark .bi-list-item-active2.disabled:active .bi-textarea {
+  color: #666666 !important;
+}
 .bi-theme-dark .bi-list-item-active2.disabled .bi-high-light,
 .bi-theme-dark .bi-list-item-active2.disabled:hover .bi-high-light,
 .bi-theme-dark .bi-list-item-active2.disabled:active .bi-high-light {
@@ -470,6 +627,10 @@
 .bi-list-item-select.hover .bi-input {
   color: #1a1a1a;
 }
+.bi-list-item-select:hover .bi-textarea,
+.bi-list-item-select.hover .bi-textarea {
+  color: #1a1a1a;
+}
 .bi-list-item-select:active,
 .bi-list-item-select.active {
   color: #ffffff;
@@ -479,6 +640,10 @@
 .bi-list-item-select.active .bi-input {
   color: #ffffff;
 }
+.bi-list-item-select:active .bi-textarea,
+.bi-list-item-select.active .bi-textarea {
+  color: #ffffff;
+}
 .bi-list-item-select:active .bi-high-light,
 .bi-list-item-select.active .bi-high-light {
   color: #ffffff;
@@ -494,6 +659,11 @@
 .bi-list-item-select.disabled:active .bi-input {
   color: #cccccc !important;
 }
+.bi-list-item-select.disabled .bi-textarea,
+.bi-list-item-select.disabled:hover .bi-textarea,
+.bi-list-item-select.disabled:active .bi-textarea {
+  color: #cccccc !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 {
@@ -509,6 +679,10 @@
 .bi-theme-dark .bi-list-item-select.hover .bi-input {
   color: #ffffff;
 }
+.bi-theme-dark .bi-list-item-select:hover .bi-textarea,
+.bi-theme-dark .bi-list-item-select.hover .bi-textarea {
+  color: #ffffff;
+}
 .bi-theme-dark .bi-list-item-select:active,
 .bi-theme-dark .bi-list-item-select.active {
   color: #ffffff;
@@ -518,6 +692,10 @@
 .bi-theme-dark .bi-list-item-select.active .bi-input {
   color: #ffffff;
 }
+.bi-theme-dark .bi-list-item-select:active .bi-textarea,
+.bi-theme-dark .bi-list-item-select.active .bi-textarea {
+  color: #ffffff;
+}
 .bi-theme-dark .bi-list-item-select:active .bi-high-light,
 .bi-theme-dark .bi-list-item-select.active .bi-high-light {
   color: #ffffff;
@@ -533,6 +711,11 @@
 .bi-theme-dark .bi-list-item-select.disabled:active .bi-input {
   color: #666666 !important;
 }
+.bi-theme-dark .bi-list-item-select.disabled .bi-textarea,
+.bi-theme-dark .bi-list-item-select.disabled:hover .bi-textarea,
+.bi-theme-dark .bi-list-item-select.disabled:active .bi-textarea {
+  color: #666666 !important;
+}
 .bi-theme-dark .bi-list-item-select.disabled .bi-high-light,
 .bi-theme-dark .bi-list-item-select.disabled:hover .bi-high-light,
 .bi-theme-dark .bi-list-item-select.disabled:active .bi-high-light {
@@ -547,6 +730,10 @@
 .bi-list-item-none.hover .bi-input {
   color: inherit;
 }
+.bi-list-item-none:hover .bi-textarea,
+.bi-list-item-none.hover .bi-textarea {
+  color: inherit;
+}
 .bi-list-item-none:active,
 .bi-list-item-none.active {
   color: inherit;
@@ -556,6 +743,10 @@
 .bi-list-item-none.active .bi-input {
   color: inherit;
 }
+.bi-list-item-none:active .bi-textarea,
+.bi-list-item-none.active .bi-textarea {
+  color: inherit;
+}
 .bi-list-item-none:active .bi-high-light,
 .bi-list-item-none.active .bi-high-light {
   color: inherit;
@@ -571,6 +762,11 @@
 .bi-list-item-none.disabled:active .bi-input {
   color: #cccccc !important;
 }
+.bi-list-item-none.disabled .bi-textarea,
+.bi-list-item-none.disabled:hover .bi-textarea,
+.bi-list-item-none.disabled:active .bi-textarea {
+  color: #cccccc !important;
+}
 .bi-list-item-none.disabled .bi-high-light,
 .bi-list-item-none.disabled:hover .bi-high-light,
 .bi-list-item-none.disabled:active .bi-high-light {
@@ -585,6 +781,10 @@
 .bi-theme-dark .bi-list-item-none.hover .bi-input {
   color: inherit;
 }
+.bi-theme-dark .bi-list-item-none:hover .bi-textarea,
+.bi-theme-dark .bi-list-item-none.hover .bi-textarea {
+  color: inherit;
+}
 .bi-theme-dark .bi-list-item-none:active,
 .bi-theme-dark .bi-list-item-none.active {
   color: inherit;
@@ -594,6 +794,10 @@
 .bi-theme-dark .bi-list-item-none.active .bi-input {
   color: inherit;
 }
+.bi-theme-dark .bi-list-item-none:active .bi-textarea,
+.bi-theme-dark .bi-list-item-none.active .bi-textarea {
+  color: inherit;
+}
 .bi-theme-dark .bi-list-item-none:active .bi-high-light,
 .bi-theme-dark .bi-list-item-none.active .bi-high-light {
   color: inherit;
@@ -609,6 +813,11 @@
 .bi-theme-dark .bi-list-item-none.disabled:active .bi-input {
   color: #666666 !important;
 }
+.bi-theme-dark .bi-list-item-none.disabled .bi-textarea,
+.bi-theme-dark .bi-list-item-none.disabled:hover .bi-textarea,
+.bi-theme-dark .bi-list-item-none.disabled:active .bi-textarea {
+  color: #666666 !important;
+}
 .bi-theme-dark .bi-list-item-none.disabled .bi-high-light,
 .bi-theme-dark .bi-list-item-none.disabled:hover .bi-high-light,
 .bi-theme-dark .bi-list-item-none.disabled:active .bi-high-light {
diff --git a/src/less/core/utils/common.less b/src/less/core/utils/common.less
index 2dd6dcc1a7..a81b98d5b4 100644
--- a/src/less/core/utils/common.less
+++ b/src/less/core/utils/common.less
@@ -6,6 +6,9 @@
   & .bi-input {
     color: @color-bi-text-disabled !important;
   }
+  & .bi-textarea {
+    color: @color-bi-text-disabled !important;
+  }
   & .b-font:before {
     color: @color-bi-text-disabled !important;
   }
@@ -17,6 +20,9 @@
     & .bi-input {
       color: @color-bi-text-disabled-theme-dark !important;
     }
+    & .bi-textarea {
+      color: @color-bi-text-disabled-theme-dark !important;
+    }
     & .b-font:before {
       color: @color-bi-text-disabled-theme-dark !important;
     }
@@ -38,6 +44,9 @@
   & .bi-input {
     color: @color-bi-text-normal;
   }
+  & .bi-textarea {
+    color: @color-bi-text-normal;
+  }
 }
 
 .bi-theme-dark {
@@ -47,6 +56,9 @@
     & .bi-input {
       color: @color-bi-text-theme-dark;
     }
+    & .bi-textarea {
+      color: @color-bi-text-theme-dark;
+    }
   }
 }
 
@@ -57,6 +69,9 @@
   & .bi-input {
     color: @color-bi-text-normal;
   }
+  & .bi-textarea {
+    color: @color-bi-text-normal;
+  }
 }
 
 .bi-theme-dark {
@@ -66,6 +81,9 @@
     & .bi-input {
       color: @color-bi-text-theme-dark;
     }
+    & .bi-textarea {
+      color: @color-bi-text-theme-dark;
+    }
   }
 }
 
@@ -74,6 +92,9 @@
   & .bi-input {
     color: @color-bi-text-disabled;
   }
+  & .bi-textarea {
+    color: @color-bi-text-disabled;
+  }
 }
 
 .bi-theme-dark {
@@ -82,6 +103,9 @@
     & .bi-input {
       color: @color-bi-text-disabled-theme-dark;
     }
+    & .bi-textarea {
+      color: @color-bi-text-disabled-theme-dark;
+    }
   }
 }
 
@@ -91,6 +115,9 @@
   & .bi-input {
     color: @color-bi-text-tips;
   }
+  & .bi-textarea {
+    color: @color-bi-text-tips;
+  }
 }
 
 //边框
@@ -150,6 +177,9 @@
   & .bi-input {
     color: @color-bi-text-redmark;
   }
+  & .bi-textarea {
+    color: @color-bi-text-redmark;
+  }
 }
 
 //高亮
@@ -158,6 +188,9 @@
   & .bi-input {
     color: @color-bi-text-highlight;
   }
+  & .bi-textarea {
+    color: @color-bi-text-highlight;
+  }
 }
 
 .bi-high-light-background {
@@ -166,6 +199,9 @@
   & .bi-input {
     color: @color-bi-text;
   }
+  & .bi-textarea {
+    color: @color-bi-text;
+  }
 }
 
 .bi-high-light-border {
@@ -179,6 +215,9 @@
   & .bi-input {
     color: @water-mark-color;
   }
+  & .bi-textarea {
+    color: @water-mark-color;
+  }
 }
 
 .bi-theme-dark {
@@ -187,6 +226,9 @@
     & .bi-input {
       color: @water-mark-color-theme-dark;
     }
+    & .bi-textarea {
+      color: @water-mark-color-theme-dark;
+    }
   }
 }
 
@@ -208,6 +250,9 @@
   & .bi-input {
     color: @color-bi-background-default;
   }
+  & .bi-textarea {
+    color: @color-bi-background-default;
+  }
   .background-color(@color-bi-background-black, 20%);
 }
 
@@ -217,6 +262,9 @@
     & .bi-input {
       color: @color-bi-background-default-theme-dark;
     }
+    & .bi-textarea {
+      color: @color-bi-background-default-theme-dark;
+    }
     .background-color(@color-bi-background-default, 20%);
   }
 }
@@ -226,6 +274,9 @@
   & .bi-input {
     color: @color-bi-background-default;
   }
+  & .bi-textarea {
+    color: @color-bi-background-default;
+  }
   .background-color(@color-bi-background-black, 50%);
 }
 
@@ -236,6 +287,9 @@
     & .bi-input {
       color: @color-bi-text-black;
     }
+    & .bi-textarea {
+      color: @color-bi-text-black;
+    }
     .background-color(@color-bi-background-black, 5%);
   }
   &.disabled {
@@ -245,6 +299,9 @@
       & .bi-input {
         color: @color-bi-text-disabled !important;
       }
+      & .bi-textarea {
+        color: @color-bi-text-disabled !important;
+      }
       & .bi-high-light {
         color: @color-bi-text-disabled !important;
       }
@@ -259,6 +316,9 @@
       & .bi-input {
         color: @color-bi-text;
       }
+      & .bi-textarea {
+        color: @color-bi-text;
+      }
       .background-color(@color-bi-background-default, 5%);
     }
     &.disabled {
@@ -268,6 +328,9 @@
         & .bi-input {
           color: @color-bi-text-disabled-theme-dark !important;
         }
+        & .bi-textarea {
+          color: @color-bi-text-disabled-theme-dark !important;
+        }
         & .bi-high-light {
           color: @color-bi-text-disabled-theme-dark !important;
         }
@@ -288,11 +351,17 @@
   & .bi-input {
     color: @color-bi-text-tips;
   }
+  & .bi-textarea {
+    color: @color-bi-text-tips;
+  }
   &:hover, &.hover {
     color: @color-bi-text-highlight;
     & .bi-input {
       color: @color-bi-text-highlight;
     }
+    & .bi-textarea {
+      color: @color-bi-text-highlight;
+    }
   }
   &.disabled {
     &, &:hover, &:active {
@@ -300,6 +369,9 @@
       & .bi-input {
         color: @color-bi-text-disabled !important;
       }
+      & .bi-textarea {
+        color: @color-bi-text-disabled !important;
+      }
       & .bi-high-light {
         color: @color-bi-text-disabled !important;
       }
@@ -314,12 +386,18 @@
     & .bi-input {
       color: @color-bi-text-black;
     }
+    & .bi-textarea {
+      color: @color-bi-text-black;
+    }
   }
   &.active, &:active {
     color: @color-bi-text-highlight;
     & .bi-input {
       color: @color-bi-text-highlight;
     }
+    & .bi-textarea {
+      color: @color-bi-text-highlight;
+    }
   }
   &.disabled {
     &, &:hover, &:active {
@@ -327,6 +405,9 @@
       & .bi-input {
         color: @color-bi-text-disabled !important;
       }
+      & .bi-textarea {
+        color: @color-bi-text-disabled !important;
+      }
       & .bi-high-light {
         color: @color-bi-text-disabled !important;
       }
@@ -341,12 +422,18 @@
       & .bi-input {
         color: @color-bi-text;
       }
+      & .bi-textarea {
+        color: @color-bi-text;
+      }
     }
     &.active, &:active {
       color: @color-bi-text-highlight;
       & .bi-input {
         color: @color-bi-text-highlight;
       }
+      & .bi-textarea {
+        color: @color-bi-text-highlight;
+      }
     }
     &.disabled {
       &, &:hover, &:active {
@@ -355,6 +442,9 @@
         & .bi-input {
           color: @color-bi-text-disabled-theme-dark !important;
         }
+        & .bi-textarea {
+          color: @color-bi-text-disabled-theme-dark !important;
+        }
         & .bi-high-light {
           color: @color-bi-text-disabled-theme-dark !important;
         }
@@ -370,6 +460,9 @@
     & .bi-input {
       color: @color-bi-text-black;
     }
+    & .bi-textarea {
+      color: @color-bi-text-black;
+    }
     .background-color(@color-bi-background-black, 5%);
   }
   &.active, &:active {
@@ -377,6 +470,9 @@
     & .bi-input {
       color: @color-bi-text-highlight;
     }
+    & .bi-textarea {
+      color: @color-bi-text-highlight;
+    }
     .background-color(@color-bi-background-black, 5%);
   }
   &.disabled {
@@ -386,6 +482,9 @@
       & .bi-input {
         color: @color-bi-text-disabled !important;
       }
+      & .bi-textarea {
+        color: @color-bi-text-disabled !important;
+      }
       & .bi-high-light {
         color: @color-bi-text-disabled !important;
       }
@@ -400,6 +499,9 @@
       & .bi-input {
         color: @color-bi-text;
       }
+      & .bi-textarea {
+        color: @color-bi-text;
+      }
       .background-color(@color-bi-background-default, 5%);
     }
     &.active, &:active {
@@ -407,6 +509,9 @@
       & .bi-input {
         color: @color-bi-text-highlight;
       }
+      & .bi-textarea {
+        color: @color-bi-text-highlight;
+      }
       .background-color(@color-bi-background-default, 5%);
     }
     &.disabled {
@@ -416,6 +521,9 @@
         & .bi-input {
           color: @color-bi-text-disabled-theme-dark !important;
         }
+        & .bi-textarea {
+          color: @color-bi-text-disabled-theme-dark !important;
+        }
         & .bi-high-light {
           color: @color-bi-text-disabled-theme-dark !important;
         }
@@ -431,6 +539,9 @@
     & .bi-input {
       color: @color-bi-text-black;
     }
+    & .bi-textarea {
+      color: @color-bi-text-black;
+    }
     background-color: @color-bi-background-default;
   }
   &.active, &:active {
@@ -438,6 +549,9 @@
     & .bi-input {
       color: @color-bi-text-highlight;
     }
+    & .bi-textarea {
+      color: @color-bi-text-highlight;
+    }
     background-color: @color-bi-background-default;
   }
   &.disabled {
@@ -447,6 +561,9 @@
       & .bi-input {
         color: @color-bi-text-disabled !important;
       }
+      & .bi-textarea {
+        color: @color-bi-text-disabled !important;
+      }
       & .bi-high-light {
         color: @color-bi-text-disabled !important;
       }
@@ -461,6 +578,9 @@
       & .bi-input {
         color: @color-bi-text;
       }
+      & .bi-textarea {
+        color: @color-bi-text;
+      }
       background-color: @color-bi-background-default-theme-dark;
     }
     &.active, &:active {
@@ -468,6 +588,9 @@
       & .bi-input {
         color: @color-bi-text-highlight;
       }
+      & .bi-textarea {
+        color: @color-bi-text-highlight;
+      }
       background-color: @color-bi-background-default-theme-dark;
     }
     &.disabled {
@@ -477,6 +600,9 @@
         & .bi-input {
           color: @color-bi-text-disabled-theme-dark !important;
         }
+        & .bi-textarea {
+          color: @color-bi-text-disabled-theme-dark !important;
+        }
         & .bi-high-light {
           color: @color-bi-text-disabled-theme-dark !important;
         }
@@ -492,6 +618,9 @@
     & .bi-input {
       color: @color-bi-text-black;
     }
+    & .bi-textarea {
+      color: @color-bi-text-black;
+    }
     .background-color(@color-bi-background-black, 5%);
   }
   &:active, &.active {
@@ -499,6 +628,9 @@
     & .bi-input {
       color: @color-bi-text;
     }
+    & .bi-textarea {
+      color: @color-bi-text;
+    }
     background-color: @color-bi-background-highlight;
     & .bi-high-light {
       color: @color-bi-text;
@@ -510,6 +642,9 @@
       & .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;
@@ -525,6 +660,9 @@
       & .bi-input {
         color: @color-bi-text;
       }
+      & .bi-textarea {
+        color: @color-bi-text;
+      }
       .background-color(@color-bi-background-default, 5%);
     }
     &:active, &.active {
@@ -532,6 +670,9 @@
       & .bi-input {
         color: @color-bi-text;
       }
+      & .bi-textarea {
+        color: @color-bi-text;
+      }
       background-color: @color-bi-background-highlight;
       & .bi-high-light {
         color: @color-bi-text;
@@ -544,6 +685,9 @@
         & .bi-input {
           color: @color-bi-text-disabled-theme-dark !important;
         }
+        & .bi-textarea {
+          color: @color-bi-text-disabled-theme-dark !important;
+        }
         & .bi-high-light {
           color: @color-bi-text-disabled-theme-dark !important;
         }
@@ -559,6 +703,9 @@
     & .bi-input {
       color: inherit;
     }
+    & .bi-textarea {
+      color: inherit;
+    }
     background-color: inherit;
   }
   &:active, &.active {
@@ -566,6 +713,9 @@
     & .bi-input {
       color: inherit;
     }
+    & .bi-textarea {
+      color: inherit;
+    }
     background-color: inherit;
     & .bi-high-light {
       color: inherit;
@@ -577,6 +727,9 @@
       & .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;
@@ -592,6 +745,9 @@
       & .bi-input {
         color: inherit;
       }
+      & .bi-textarea {
+        color: inherit;
+      }
       background-color: inherit;
     }
     &:active, &.active {
@@ -599,6 +755,9 @@
       & .bi-input {
         color: inherit;
       }
+      & .bi-textarea {
+        color: inherit;
+      }
       background-color: inherit;
       & .bi-high-light {
         color: inherit;
@@ -611,6 +770,9 @@
         & .bi-input {
           color: @color-bi-text-disabled-theme-dark !important;
         }
+        & .bi-textarea {
+          color: @color-bi-text-disabled-theme-dark !important;
+        }
         & .bi-high-light {
           color: @color-bi-text-disabled-theme-dark !important;
         }