diff --git a/demo/js/component/demo.form.js b/demo/js/component/demo.form.js
new file mode 100644
index 000000000..31ca38195
--- /dev/null
+++ b/demo/js/component/demo.form.js
@@ -0,0 +1,100 @@
+/**
+ * @author windy
+ * @version 2.0
+ * Created by windy on 2022/1/11
+ */
+Demo.Form = BI.inherit(BI.Widget, {
+    props: {
+        baseCls: "demo-form"
+    },
+    render: function () {
+        var widget = BI.createWidget({
+            type: "bi.custom_form",
+            width: 300,
+            labelWidth: 100,
+            items: [{
+                validate: function (v) {
+                    return v !== "a" && v !== "";
+                },
+                tip: function (v) {
+                    if (BI.isEmpty(v)) {
+                        return "不能为空";
+                    }
+                    return "不合法格式"
+                },
+                label: "E-mail",
+                el: {
+                    type: 'bi.text_editor',
+                    watermark: "输入a报错",
+                    allowBlank: true,
+                }
+            }, {
+                validate: function (v) {
+                    return BI.isNotEmptyArray(v);
+                },
+                tip: function () {
+                    return "不能为空";
+                },
+                label: "性别",
+                el: {
+                    type: 'bi.text_value_combo',
+                    text: "请选择",
+                    items: [{
+                        text: "男",
+                        value: 1
+                    }, {
+                        text: "女",
+                        value: 2
+                    }]
+                }
+            }, {
+                validate: function (v) {
+                    return v !== "";
+                },
+                tip: function () {
+                    return "不能为空";
+                },
+                label: "姓名",
+                el: {
+                    type: 'bi.text_editor',
+                    watermark: "输入姓名",
+                    allowBlank: true,
+                }
+            }, {
+                validate: function (v) {
+                    return v !== "";
+                },
+                tip: function () {
+                    return "不能为空";
+                },
+                label: "姓名",
+                el: {
+                    type: 'bi.textarea_editor',
+                    cls: 'bi-border',
+                    watermark: "输入简介",
+                    allowBlank: true,
+                    height: 200,
+                }
+            }],
+            layout: {
+                type: "bi.vertical",
+                vgap: 30
+            }
+        });
+        return {
+            type: "bi.vertical",
+            hgap: 200,
+            vgap: 10,
+            items: [widget, {
+                type: "bi.button",
+                text: "提交",
+                handler: function () {
+                    widget.validate();
+
+                    console.log(widget.getValue());
+                }
+            }]
+        };
+    }
+});
+BI.shortcut("demo.form", Demo.Form);
\ No newline at end of file
diff --git a/demo/js/config/component.js b/demo/js/config/component.js
index 32f67a3e4..e6bbb9cf0 100644
--- a/demo/js/config/component.js
+++ b/demo/js/config/component.js
@@ -20,4 +20,8 @@ Demo.COMPONENT_CONFIG = [{
     pId: 5,
     text: "bi.tree_value_chooser_pane",
     value: "demo.tree_value_chooser_pane"
+}, {
+    pId: 5,
+    text: "demo.form",
+    value: "demo.form"
 }];
\ No newline at end of file
diff --git a/src/base/single/editor/editor.js b/src/base/single/editor/editor.js
index 3191e4aeb..2d9941bb4 100644
--- a/src/base/single/editor/editor.js
+++ b/src/base/single/editor/editor.js
@@ -109,12 +109,14 @@ BI.Editor = BI.inherit(BI.Single, {
         this.editor.on(BI.Input.EVENT_VALID, function () {
             self._checkWaterMark();
             self._setErrorVisible(false);
+            self.element.removeClass("error");
             self.fireEvent(BI.Editor.EVENT_VALID, arguments);
         });
         this.editor.on(BI.Input.EVENT_ERROR, function () {
             self._checkWaterMark();
             self.fireEvent(BI.Editor.EVENT_ERROR, arguments);
             self._setErrorVisible(self.isEditing());
+            self.element.addClass("error");
         });
         this.editor.on(BI.Input.EVENT_RESTRICT, function () {
             self._checkWaterMark();
@@ -269,7 +271,7 @@ BI.Editor = BI.inherit(BI.Single, {
         }
         if (!this.disabledError && BI.isKey(errorText)) {
             BI.Bubbles[b ? "show" : "hide"](this.getName(), errorText, this, {
-                adjustYOffset: 2
+                adjustYOffset: o.simple ? 1 : 2
             });
             this._checkToolTip();
         }
diff --git a/src/base/single/editor/editor.textarea.js b/src/base/single/editor/editor.textarea.js
index 177f33b26..67a197ddd 100644
--- a/src/base/single/editor/editor.textarea.js
+++ b/src/base/single/editor/editor.textarea.js
@@ -5,12 +5,12 @@
  * @extends BI.Single
  */
 BI.TextAreaEditor = BI.inherit(BI.Single, {
-    _defaultConfig: function () {
+    _defaultConfig: function (conf) {
         return BI.extend(BI.TextAreaEditor.superclass._defaultConfig.apply(), {
             baseCls: "bi-textarea-editor",
             value: "",
             errorText: "",
-            adjustYOffset: 2,
+            adjustYOffset: conf.simple ? 0 : 2,
             adjustXOffset: 0,
             offsetStyle: "left",
             validationChecker: function () {
@@ -156,7 +156,9 @@ BI.TextAreaEditor = BI.inherit(BI.Single, {
     },
 
     _checkError: function () {
-        this._setErrorVisible(this._isError());
+        var isError = this._isError();
+        this._setErrorVisible(isError);
+        this.element[isError ? "addClass" : "removeClass"]("error");
     },
 
     _focus: function () {
diff --git a/src/case/calendar/calendar.js b/src/case/calendar/calendar.js
index d39f14ff5..733e3a662 100644
--- a/src/case/calendar/calendar.js
+++ b/src/case/calendar/calendar.js
@@ -78,7 +78,7 @@ BI.Calendar = BI.inherit(BI.Widget, {
         var items = BI.map(this._getWeekLabel(), function (i, value) {
             return {
                 type: "bi.label",
-                height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
+                height: BI.SIZE_CONSANTS.DATE_LIST_ITEM_HEIGHT,
                 text: value
             };
         });
@@ -101,7 +101,7 @@ BI.Calendar = BI.inherit(BI.Widget, {
                 columns: 7,
                 rows: 6,
                 columnSize: [1 / 7, 1 / 7, 1 / 7, 1 / 7, 1 / 7, 1 / 7, 1 / 7],
-                rowSize: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT + 10
+                rowSize: BI.SIZE_CONSANTS.DATE_LIST_ITEM_HEIGHT + 10
             }))]
         });
         this.days.on(BI.Controller.EVENT_CHANGE, function () {
@@ -162,13 +162,13 @@ BI.Calendar = BI.inherit(BI.Widget, {
                     whiteSpace: "normal",
                     once: false,
                     forceSelected: true,
-                    height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT + 10,
+                    height: BI.SIZE_CONSANTS.DATE_LIST_ITEM_HEIGHT + 10,
                     value: o.year + "-" + month + "-" + td.text,
                     disabled: td.lastMonth || td.nextMonth || td.disabled,
-                    lgap: 5,
-                    rgap: 5,
-                    tgap: 5,
-                    bgap: 5
+                    lgap: 2,
+                    rgap: 2,
+                    tgap: 4,
+                    bgap: 4
                     // selected: td.currentDay
                 });
             });
diff --git a/src/case/calendar/calendar.year.js b/src/case/calendar/calendar.year.js
index a692d19b8..29679bb41 100644
--- a/src/case/calendar/calendar.year.js
+++ b/src/case/calendar/calendar.year.js
@@ -51,10 +51,10 @@ BI.YearCalendar = BI.inherit(BI.Widget, {
                 columns: 2,
                 rows: 6,
                 columnSize: [1 / 2, 1 / 2],
-                rowSize: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
+                rowSize: BI.SIZE_CONSANTS.DATE_LIST_ITEM_HEIGHT,
             })), {
                 type: "bi.center_adapt",
-                vgap: 1
+                vgap: 2
             }]
         });
         this.years.on(BI.Controller.EVENT_CHANGE, function () {
@@ -65,6 +65,7 @@ BI.YearCalendar = BI.inherit(BI.Widget, {
         }, BI.LogicFactory.createLogic("vertical", BI.extend({}, o.logic, {
             scrolly: true,
             vgap: 5,
+            hgap: 6,
             items: BI.LogicFactory.createLogicItemsByDirection("top", this.years)
         }))));
     },
@@ -106,12 +107,12 @@ BI.YearCalendar = BI.inherit(BI.Widget, {
             return BI.map(item, function (j, td) {
                 return BI.extend(td, {
                     type: "bi.text_item",
-                    cls: "bi-list-item-select",
+                    cls: "bi-list-item-select bi-border-radius",
                     textAlign: "center",
                     whiteSpace: "normal",
                     once: false,
                     forceSelected: true,
-                    height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
+                    height: BI.SIZE_CONSANTS.DATE_LIST_ITEM_HEIGHT,
                     width: 45,
                     value: td.text,
                     disabled: td.disabled
diff --git a/src/case/colorchooser/colorchooser.trigger.js b/src/case/colorchooser/colorchooser.trigger.js
index 8efe4fb79..9f8e370e7 100644
--- a/src/case/colorchooser/colorchooser.trigger.js
+++ b/src/case/colorchooser/colorchooser.trigger.js
@@ -7,10 +7,10 @@
  */
 BI.ColorChooserTrigger = BI.inherit(BI.Trigger, {
 
-    _defaultConfig: function () {
+    _defaultConfig: function (config) {
         var conf = BI.ColorChooserTrigger.superclass._defaultConfig.apply(this, arguments);
         return BI.extend(conf, {
-            baseCls: (conf.baseCls || "") + " bi-color-chooser-trigger bi-border bi-focus-shadow",
+            baseCls: (conf.baseCls || "") + " bi-color-chooser-trigger bi-focus-shadow " + (config.simple ? "bi-border-bottom" : "bi-border"),
             height: 22
         });
     },
diff --git a/src/case/colorchooser/colorchooser.trigger.long.js b/src/case/colorchooser/colorchooser.trigger.long.js
index eb15f7551..e6c518c08 100644
--- a/src/case/colorchooser/colorchooser.trigger.long.js
+++ b/src/case/colorchooser/colorchooser.trigger.long.js
@@ -7,10 +7,10 @@
  */
 BI.LongColorChooserTrigger = BI.inherit(BI.Trigger, {
 
-    _defaultConfig: function () {
+    _defaultConfig: function (config) {
         var conf = BI.LongColorChooserTrigger.superclass._defaultConfig.apply(this, arguments);
         return BI.extend(conf, {
-            baseCls: (conf.baseCls || "") + " bi-color-chooser-trigger bi-border bi-focus-shadow",
+            baseCls: (conf.baseCls || "") + " bi-color-chooser-trigger bi-focus-shadow " + (config.simple ? "bi-border-bottom" : "bi-border"),
             height: 24
         });
     },
diff --git a/src/case/combo/icontextvaluecombo/combo.icontextvalue.js b/src/case/combo/icontextvaluecombo/combo.icontextvalue.js
index 118138779..35758a089 100644
--- a/src/case/combo/icontextvaluecombo/combo.icontextvalue.js
+++ b/src/case/combo/icontextvaluecombo/combo.icontextvalue.js
@@ -3,9 +3,9 @@
  * combo : icon + text + icon, popup : icon + text
  */
 BI.IconTextValueCombo = BI.inherit(BI.Widget, {
-    _defaultConfig: function () {
+    _defaultConfig: function (config) {
         return BI.extend(BI.IconTextValueCombo.superclass._defaultConfig.apply(this, arguments), {
-            baseCls: "bi-icon-text-value-combo bi-border bi-border-radius",
+            baseCls: "bi-icon-text-value-combo bi-border-radius " + (config.simple ? "bi-border-bottom" : "bi-border"),
             height: 24,
             iconHeight: null,
             iconWidth: null,
diff --git a/src/case/combo/searchtextvaluecombo/combo.searchtextvalue.js b/src/case/combo/searchtextvaluecombo/combo.searchtextvalue.js
index 05553d05a..4095cb09e 100644
--- a/src/case/combo/searchtextvaluecombo/combo.searchtextvalue.js
+++ b/src/case/combo/searchtextvaluecombo/combo.searchtextvalue.js
@@ -20,7 +20,7 @@ BI.SearchTextValueCombo = BI.inherit(BI.Widget, {
             items: [{
                 el: {
                     type: "bi.combo",
-                    cls: "bi-border bi-focus-shadow",
+                    cls: (o.simple ? "bi-border-bottom" : "bi-border") + " bi-focus-shadow",
                     container: o.container,
                     adjustLength: 2,
                     toggle: false,
diff --git a/src/case/combo/textvaluecheckcombo/combo.textvaluecheck.js b/src/case/combo/textvaluecheckcombo/combo.textvaluecheck.js
index 530cc2a01..891481a8a 100644
--- a/src/case/combo/textvaluecheckcombo/combo.textvaluecheck.js
+++ b/src/case/combo/textvaluecheckcombo/combo.textvaluecheck.js
@@ -4,9 +4,9 @@
  * combo : text + icon, popup : check + text
  */
 BI.TextValueCheckCombo = BI.inherit(BI.Widget, {
-    _defaultConfig: function () {
+    _defaultConfig: function (config) {
         return BI.extend(BI.TextValueCheckCombo.superclass._defaultConfig.apply(this, arguments), {
-            baseCls: "bi-text-value-check-combo bi-border",
+            baseCls: "bi-text-value-check-combo " + (config.simple ? "bi-border-bottom" : "bi-border"),
             width: 100,
             height: 24,
             chooseType: BI.ButtonGroup.CHOOSE_TYPE_SINGLE,
diff --git a/src/case/combo/textvaluecombo/combo.textvalue.js b/src/case/combo/textvaluecombo/combo.textvalue.js
index b0242a64d..7dc38d9fe 100644
--- a/src/case/combo/textvaluecombo/combo.textvalue.js
+++ b/src/case/combo/textvaluecombo/combo.textvalue.js
@@ -5,9 +5,9 @@
  * 参见场景dashboard布局方式选择
  */
 BI.TextValueCombo = BI.inherit(BI.Widget, {
-    _defaultConfig: function () {
+    _defaultConfig: function (config) {
         return BI.extend(BI.TextValueCombo.superclass._defaultConfig.apply(this, arguments), {
-            baseCls: "bi-text-value-combo bi-border",
+            baseCls: "bi-text-value-combo " + (config.simple ? "bi-border-bottom" : "bi-border"),
             height: 24,
             chooseType: BI.ButtonGroup.CHOOSE_TYPE_SINGLE,
             text: "",
diff --git a/src/case/editor/editor.clear.js b/src/case/editor/editor.clear.js
index 6296d5418..253d32431 100644
--- a/src/case/editor/editor.clear.js
+++ b/src/case/editor/editor.clear.js
@@ -21,6 +21,7 @@ BI.ClearEditor = BI.inherit(BI.Widget, {
         var self = this, o = this.options;
         this.editor = BI.createWidget({
             type: "bi.editor",
+            simple: o.simple,
             height: o.height,
             watermark: o.watermark,
             allowBlank: true,
diff --git a/src/case/editor/editor.shelter.js b/src/case/editor/editor.shelter.js
index d3c76f226..dec410d87 100644
--- a/src/case/editor/editor.shelter.js
+++ b/src/case/editor/editor.shelter.js
@@ -30,6 +30,7 @@ BI.ShelterEditor = BI.inherit(BI.Widget, {
         var self = this, o = this.options;
         this.editor = BI.createWidget({
             type: "bi.editor",
+            simple: o.simple,
             height: o.height,
             hgap: o.hgap,
             vgap: o.vgap,
diff --git a/src/case/editor/editor.sign.js b/src/case/editor/editor.sign.js
index 78029885e..f2ae0560f 100644
--- a/src/case/editor/editor.sign.js
+++ b/src/case/editor/editor.sign.js
@@ -30,6 +30,7 @@ BI.SignEditor = BI.inherit(BI.Widget, {
         var self = this, o = this.options;
         this.editor = BI.createWidget({
             type: "bi.editor",
+            simple: o.simple,
             height: o.height,
             hgap: o.hgap,
             vgap: o.vgap,
diff --git a/src/case/editor/editor.state.js b/src/case/editor/editor.state.js
index dcd8e9147..d1e11b20a 100644
--- a/src/case/editor/editor.state.js
+++ b/src/case/editor/editor.state.js
@@ -32,6 +32,7 @@ BI.StateEditor = BI.inherit(BI.Widget, {
         var self = this, o = this.options;
         this.editor = BI.createWidget(o.el, {
             type: "bi.editor",
+            simple: o.simple,
             height: o.height,
             hgap: o.hgap,
             vgap: o.vgap,
diff --git a/src/case/editor/editor.state.simple.js b/src/case/editor/editor.state.simple.js
index 6fab8d6f8..81b815441 100644
--- a/src/case/editor/editor.state.simple.js
+++ b/src/case/editor/editor.state.simple.js
@@ -31,6 +31,7 @@ BI.SimpleStateEditor = BI.inherit(BI.Widget, {
         var self = this, o = this.options;
         this.editor = BI.createWidget({
             type: "bi.editor",
+            simple: o.simple,
             height: o.height,
             hgap: o.hgap,
             vgap: o.vgap,
diff --git a/src/component/allvaluechooser/combo.allvaluechooser.js b/src/component/allvaluechooser/combo.allvaluechooser.js
index ac0f03b11..11494b584 100644
--- a/src/component/allvaluechooser/combo.allvaluechooser.js
+++ b/src/component/allvaluechooser/combo.allvaluechooser.js
@@ -27,6 +27,7 @@ BI.AllValueChooserCombo = BI.inherit(BI.AbstractAllValueChooser, {
         }
         this.combo = BI.createWidget({
             type: "bi.multi_select_combo",
+            simple: o.simple,
             text: o.text,
             element: this,
             itemsCreator: BI.bind(this._itemsCreator, this),
diff --git a/src/component/allvaluemultitextvaluecombo/allvalue.multitextvalue.combo.js b/src/component/allvaluemultitextvaluecombo/allvalue.multitextvalue.combo.js
index 213d56ff7..2ac30295b 100644
--- a/src/component/allvaluemultitextvaluecombo/allvalue.multitextvalue.combo.js
+++ b/src/component/allvaluemultitextvaluecombo/allvalue.multitextvalue.combo.js
@@ -12,6 +12,7 @@ BI.AllValueMultiTextValueCombo = BI.inherit(BI.Widget, {
         var value = this._digestValue(o.value);
         return {
             type: "bi.search_multi_text_value_combo",
+            simple: o.simple,
             text: o.text,
             height: o.height,
             items: o.items,
diff --git a/src/component/form/form.field.js b/src/component/form/form.field.js
new file mode 100644
index 000000000..d14156629
--- /dev/null
+++ b/src/component/form/form.field.js
@@ -0,0 +1,85 @@
+/**
+ * @author windy
+ * @version 2.0
+ * Created by windy on 2022/1/11
+ */
+BI.FormField = BI.inherit(BI.Widget, {
+
+    props: {
+        baseCls: "bi-form-field",
+        label: "",
+        el: {},
+        validate: BI.emptyFn
+    },
+
+    render: function () {
+        var self = this, o = this.options;
+
+        var field = {
+            type: "bi.absolute",
+            items: [{
+                el: BI.extend({}, o.el, {
+                    ref: function (_ref) {
+                        self.field = _ref;
+                        o.el.ref && o.el.ref.call(this, _ref);
+                    },
+                    height: o.el.height || 28,
+                    listeners: [{
+                        eventName: "EVENT_CHANGE",
+                        action: function () {
+                            self.fireEvent("EVENT_CHANGE");
+                        }
+                    }]
+                }),
+                left: 0,
+                bottom: 0,
+                right: 0,
+                top: 0
+            }, {
+                el: {
+                    type: "bi.label",
+                    cls: "error-tip bi-error",
+                    ref: function (_ref) {
+                        self.error = _ref;
+                    },
+                    invisible: true
+                },
+                bottom: -20,
+                left: 0,
+                right: 0,
+                height: 20
+            }]
+        };
+
+        return {
+            type: "bi.vertical_adapt",
+            columnSize: ["auto", "fill"],
+            verticalAlign: BI.VerticalAlign.Stretch,
+            hgap: 5,
+            items: BI.isKey(o.label) ? [{
+                type: "bi.label",
+                text: o.label + ":",
+                width: o.labelWidth
+            }, field] : [field]
+        };
+    },
+
+    getValue: function () {
+        return this.field.getValue();
+    },
+
+    validate: function () {
+        var isValid = this.validateWithNoTip();
+        !isValid && this.error.setText(this.options.tip(this.field.getValue(), this.field));
+        this.error.setVisible(!isValid);
+        this.element[isValid ? "removeClass" : "addClass"]("error");
+
+        return isValid;
+    },
+
+    validateWithNoTip: function () {
+        return this.options.validate(this.field.getValue(), this.field);
+    }
+});
+
+BI.shortcut("bi.form_field", BI.FormField);
diff --git a/src/component/form/form.js b/src/component/form/form.js
new file mode 100644
index 000000000..12d1a651b
--- /dev/null
+++ b/src/component/form/form.js
@@ -0,0 +1,89 @@
+/**
+ * @author windy
+ * @version 2.0
+ * Created by windy on 2022/1/11
+ */
+BI.Form = BI.inherit(BI.Widget, {
+
+    props: {
+        baseCls: "bi-form",
+        layout: {
+            type: "bi.vertical",
+            vgap: 20
+        },
+        items: [{
+            validate: BI.emptyFn,
+            tip: BI.emptyFn,
+            label: "",
+            el: {}
+        }],
+        labelWidth: ""
+    },
+
+    render: function () {
+        var self = this, o = this.options;
+
+        return {
+            type: "bi.button_group",
+            items: this._createItems(),
+            layouts: [o.layout],
+            ref: function (ref) {
+                self.group = ref;
+            }
+        };
+    },
+
+    _createItems: function () {
+        var o = this.options;
+
+        return BI.map(o.items, function (idx, item) {
+            return {
+                type: "bi.form_field",
+                height: item.el.height || 28,
+                labelWidth: o.labelWidth,
+                el: item.el,
+                label: item.label,
+                tip: item.tip,
+                validate: item.validate,
+                listeners: [{
+                    eventName: "EVENT_CHANGE",
+                    action: function () {
+                        this.validate();
+                    }
+                }]
+            };
+        });
+    },
+
+    isAllValid: function () {
+        return !BI.some(this.validateWithNoTip(), function (idx, v) {
+            return !v;
+        });
+    },
+
+    validateWithNoTip: function () {
+        var validInfo = [];
+        BI.each(this.group.getAllButtons(), function (idx, button) {
+            validInfo.push(button.validateWithNoTip());
+        });
+
+        return validInfo;
+    },
+
+    validate: function () {
+        var validInfo = [];
+        BI.each(this.group.getAllButtons(), function (idx, button) {
+            validInfo.push(button.validate());
+        });
+
+        return validInfo;
+    },
+
+    getValue: function () {
+        return !this.isAllValid() ? null : BI.map(this.group.getAllButtons(), function (idx, button) {
+            return button.getValue();
+        });
+    }
+});
+
+BI.shortcut("bi.custom_form", BI.Form);
diff --git a/src/component/treevaluechooser/combo.listtreevaluechooser.js b/src/component/treevaluechooser/combo.listtreevaluechooser.js
index 97a682a87..a90c6a4b9 100644
--- a/src/component/treevaluechooser/combo.listtreevaluechooser.js
+++ b/src/component/treevaluechooser/combo.listtreevaluechooser.js
@@ -26,6 +26,7 @@ BI.ListTreeValueChooserInsertCombo = BI.inherit(BI.AbstractListTreeValueChooser,
         }
         this.combo = BI.createWidget({
             type: "bi.multi_tree_list_combo",
+            simple: o.simple,
             isNeedAdjustWidth: o.isNeedAdjustWidth,
             element: this,
             text: o.text,
diff --git a/src/component/treevaluechooser/combo.treevaluechooser.insert.js b/src/component/treevaluechooser/combo.treevaluechooser.insert.js
index 07c4ad9ec..b01fe2e0f 100644
--- a/src/component/treevaluechooser/combo.treevaluechooser.insert.js
+++ b/src/component/treevaluechooser/combo.treevaluechooser.insert.js
@@ -26,6 +26,7 @@ BI.TreeValueChooserInsertCombo = BI.inherit(BI.AbstractTreeValueChooser, {
         }
         this.combo = BI.createWidget({
             type: "bi.multi_tree_insert_combo",
+            simple: o.simple,
             isNeedAdjustWidth: o.isNeedAdjustWidth,
             allowEdit: o.allowEdit,
             text: o.text,
diff --git a/src/component/treevaluechooser/combo.treevaluechooser.js b/src/component/treevaluechooser/combo.treevaluechooser.js
index 452dce5bb..fbff4000a 100644
--- a/src/component/treevaluechooser/combo.treevaluechooser.js
+++ b/src/component/treevaluechooser/combo.treevaluechooser.js
@@ -25,7 +25,8 @@ BI.TreeValueChooserCombo = BI.inherit(BI.AbstractTreeValueChooser, {
             this._initData(o.items);
         }
         this.combo = BI.createWidget({
-            type: "bi.multi_tree_combo",
+            type: "bi.multi_tree_list_combo",
+            simple: o.simple,
             text: o.text,
             allowEdit: o.allowEdit,
             value: o.value,
diff --git a/src/component/valuechooser/combo.valuechooser.insert.js b/src/component/valuechooser/combo.valuechooser.insert.js
index cc64d15b6..a2cdce0d9 100644
--- a/src/component/valuechooser/combo.valuechooser.insert.js
+++ b/src/component/valuechooser/combo.valuechooser.insert.js
@@ -23,6 +23,7 @@ BI.ValueChooserInsertCombo = BI.inherit(BI.AbstractValueChooser, {
         }
         this.combo = BI.createWidget({
             type: "bi.multi_select_insert_combo",
+            simple: o.simple,
             element: this,
             allowEdit: o.allowEdit,
             text: o.text,
diff --git a/src/component/valuechooser/combo.valuechooser.js b/src/component/valuechooser/combo.valuechooser.js
index 9f1a05f8d..3da94a312 100644
--- a/src/component/valuechooser/combo.valuechooser.js
+++ b/src/component/valuechooser/combo.valuechooser.js
@@ -27,6 +27,7 @@ BI.ValueChooserCombo = BI.inherit(BI.AbstractValueChooser, {
         }
         this.combo = BI.createWidget({
             type: "bi.multi_select_combo",
+            simple: o.simple,
             element: this,
             allowEdit: o.allowEdit,
             text: o.text,
diff --git a/src/component/valuechooser/combo.valuechooser.nobar.js b/src/component/valuechooser/combo.valuechooser.nobar.js
index 3fc381df3..927f70f81 100644
--- a/src/component/valuechooser/combo.valuechooser.nobar.js
+++ b/src/component/valuechooser/combo.valuechooser.nobar.js
@@ -22,6 +22,7 @@ BI.ValueChooserNoBarCombo = BI.inherit(BI.AbstractValueChooser, {
 
         return {
             type: "bi.multi_select_no_bar_combo",
+            simple: o.simple,
             allowEdit: o.allowEdit,
             text: o.text,
             value: this._assertValue(o.value),
diff --git a/src/core/system.js b/src/core/system.js
index 59281243c..8de9226a7 100644
--- a/src/core/system.js
+++ b/src/core/system.js
@@ -9,11 +9,15 @@
         dependencies: {},
         responsiveMode: false,
         workerMode: false,
-        size: { // 尺寸
+        size: {
+            // 尺寸
+            // 通用尺寸
             TOOL_BAR_HEIGHT: 24,
             LIST_ITEM_HEIGHT: 24,
             TRIGGER_HEIGHT: 24,
-            TOAST_TOP: 10
+            TOAST_TOP: 10,
+            // 根据控件类型特化尺寸
+            DATE_LIST_ITEM_HEIGHT: 24
         }
     };
 
diff --git a/src/less/base/combo/combo.less b/src/less/base/combo/combo.less
index b640fc668..e6b8bcded 100644
--- a/src/less/base/combo/combo.less
+++ b/src/less/base/combo/combo.less
@@ -22,13 +22,13 @@
     }
   }
   &.bi-combo-popup, &.bi-combo-hover, &:hover {
-    &.bi-border {
+    &.bi-border, &.bi-border-bottom {
       border-color: @color-bi-border-hover-combo;
     }
   }
   &.disabled {
     &.bi-combo-hover, &:hover {
-      &.bi-border {
+      &.bi-border, &.bi-border-bottom {
         border-color: @color-bi-border-hover-disabled-combo;
       }
     }
@@ -39,7 +39,7 @@
   .bi-combo {
     &.disabled {
       &.bi-combo-hover, &:hover {
-        &.bi-border {
+        &.bi-border, &.bi-border-bottom {
           border-color: @color-bi-border-hover-disabled-combo-theme-dark;
         }
       }
diff --git a/src/less/base/combo/combo.searchtextvalue.less b/src/less/base/combo/combo.searchtextvalue.less
index e749192b8..de0ec79b3 100644
--- a/src/less/base/combo/combo.searchtextvalue.less
+++ b/src/less/base/combo/combo.searchtextvalue.less
@@ -13,6 +13,9 @@
         color: @color-bi-text-error-hover-search-text-value-combo;
       }
     }
+    &>.bi-border, &>.bi-border-bottom {
+      border-color: @border-color-negative;
+    }
   }
   // 此combo的trigger_button是absolute上去的，与bi-combo在同一层级，独立写一下
   & .bi-combo.bi-combo-popup + .bi-trigger-icon-button {
diff --git a/src/less/base/combo/combo.textvalue.icon.less b/src/less/base/combo/combo.textvalue.icon.less
index 147c04819..6951dcebb 100644
--- a/src/less/base/combo/combo.textvalue.icon.less
+++ b/src/less/base/combo/combo.textvalue.icon.less
@@ -7,5 +7,8 @@
         color: @color-bi-text-error-hover-text-value-icon-combo;
       }
     }
+    &>.bi-border, &>.bi-border-bottom {
+      border-color: @border-color-negative;
+    }
   }
 }
\ No newline at end of file
diff --git a/src/less/base/combo/combo.textvalue.less b/src/less/base/combo/combo.textvalue.less
index fb86c52cd..f1e703030 100644
--- a/src/less/base/combo/combo.textvalue.less
+++ b/src/less/base/combo/combo.textvalue.less
@@ -7,5 +7,8 @@
         color: @color-bi-text-error-hover-text-value-combo;
       }
     }
+    &>.bi-border, &>.bi-border-bottom {
+      border-color: @border-color-negative;
+    }
   }
 }
\ No newline at end of file
diff --git a/src/less/base/combo/combo.textvaluecheck.less b/src/less/base/combo/combo.textvaluecheck.less
index fb29b9ec6..9965f103f 100644
--- a/src/less/base/combo/combo.textvaluecheck.less
+++ b/src/less/base/combo/combo.textvaluecheck.less
@@ -2,7 +2,7 @@
 
 .bi-text-value-check-combo {
   &.bi-combo-popup, &:hover {
-    & > .bi-border {
+    & > .bi-border, & > .bi-border-bottom {
       border-color: @color-bi-border-hover-text-value-check-combo;
     }
   }
diff --git a/src/less/base/combo/combo.textvaluedownlist.less b/src/less/base/combo/combo.textvaluedownlist.less
index ef558d1ee..823410272 100644
--- a/src/less/base/combo/combo.textvaluedownlist.less
+++ b/src/less/base/combo/combo.textvaluedownlist.less
@@ -2,7 +2,7 @@
 
 .bi-text-value-down-list-combo {
   &.bi-combo-popup, &:hover {
-    & > .bi-border {
+    & > .bi-border, & > .bi-border-bottom {
       border-color: @color-bi-border-hover-text-value-down-list-combo;
     }
   }
diff --git a/src/less/component/form/form.less b/src/less/component/form/form.less
new file mode 100644
index 000000000..b4e77e0a8
--- /dev/null
+++ b/src/less/component/form/form.less
@@ -0,0 +1,14 @@
+@import "../../index";
+
+.bi-form {
+  & .bi-form-field.error {
+    & .bi-border, & .bi-border-bottom {
+      border-color: @border-color-negative;
+    }
+  }
+  & .bi-form-field {
+    & .error-tip {
+      background-color: @color-bi-background-error-form;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/less/core/utils/common.less b/src/less/core/utils/common.less
index facfb9054..21caf1b3a 100644
--- a/src/less/core/utils/common.less
+++ b/src/less/core/utils/common.less
@@ -177,6 +177,9 @@
   &.disabled {
     border-color: @color-bi-border-disabled !important;
   }
+  &.error {
+    border-color: @border-color-negative;
+  }
 }
 
 .bi-border-top {
@@ -184,6 +187,9 @@
   &.disabled {
     border-color: @color-bi-border-disabled !important;
   }
+  &.error {
+    border-color: @border-color-negative;
+  }
 }
 
 .bi-border-right {
@@ -191,6 +197,9 @@
   &.disabled {
     border-color: @color-bi-border-disabled !important;
   }
+  &.error {
+    border-color: @border-color-negative;
+  }
 }
 
 .bi-border-bottom {
@@ -198,6 +207,9 @@
   &.disabled {
     border-color: @color-bi-border-disabled !important;
   }
+  &.error {
+    border-color: @border-color-negative;
+  }
 }
 
 .bi-border-left {
@@ -205,6 +217,9 @@
   &.disabled {
     border-color: @color-bi-border-disabled !important;
   }
+  &.error {
+    border-color: @border-color-negative;
+  }
 }
 
 .bi-theme-dark {
diff --git a/src/less/lib/theme.less b/src/less/lib/theme.less
index 5ac2cfc6b..e38696969 100644
--- a/src/less/lib/theme.less
+++ b/src/less/lib/theme.less
@@ -206,6 +206,7 @@
 // 复选下拉
 @color-bi-text-multi-select-search-pane-toolbar: @color-bi-text-redmark;
 @color-bi-text-error-multi-select-trigger: @color-bi-text-failure;
+@color-bi-background-multi-select-trigger-check-selected: @color-bi-blue-10;
 // 复选树
 @color-bi-text-multi-tree-check-pane-check-button: @color-bi-text-highlight;
 // 单选下拉
@@ -217,4 +218,6 @@
 @color-bi-border-year-popup-theme-dark: @color-bi-border-line-theme-dark;
 @color-bi-text-error-year-interval: @color-bi-text-failure;
 @color-bi-text-error-year-month-interval: @color-bi-text-failure;
-@color-bi-text-error-year-quarter-interval: @color-bi-text-failure;
\ No newline at end of file
+@color-bi-text-error-year-quarter-interval: @color-bi-text-failure;
+// 表单
+@color-bi-background-error-form: @color-bi-red-5;
\ No newline at end of file
diff --git a/src/less/widget/multiselect/trigger/button.checkselected.less b/src/less/widget/multiselect/trigger/button.checkselected.less
index a408e4659..deea8a46b 100644
--- a/src/less/widget/multiselect/trigger/button.checkselected.less
+++ b/src/less/widget/multiselect/trigger/button.checkselected.less
@@ -4,4 +4,8 @@
   z-index: 1;
   min-width: 16px;
   .border-radius(8px);
+  &:active {
+    color: @color-bi-text-highlight;
+    background-color: @color-bi-background-multi-select-trigger-check-selected;
+  }
 }
diff --git a/src/less/widget/multitree/trigger/multi.tree.button.checkselected.less b/src/less/widget/multitree/trigger/multi.tree.button.checkselected.less
index 9ac554145..b4903d3ba 100644
--- a/src/less/widget/multitree/trigger/multi.tree.button.checkselected.less
+++ b/src/less/widget/multitree/trigger/multi.tree.button.checkselected.less
@@ -8,5 +8,8 @@
   .trigger-check-text {
     .border-radius(8px);
     z-index: 1;
+    &:active {
+      background-color: @color-bi-background-multi-select-trigger-check-selected;
+    }
   }
 }
\ No newline at end of file
diff --git a/src/less/widget/singleslider/slider/widget.slider.less b/src/less/widget/singleslider/slider/widget.slider.less
index 1a82ae600..9ecc523d8 100644
--- a/src/less/widget/singleslider/slider/widget.slider.less
+++ b/src/less/widget/singleslider/slider/widget.slider.less
@@ -7,17 +7,18 @@
     border-style: solid;
     .border-radius(8px);
     background-color: @color-bi-background-slider-button;
-    height: 12px;
-    width: 12px;
-    top: 6px;
-    left: -8px;
+    height: 8px;
+    width: 8px;
+    top: 8px;
+    left: -6px;
     &:hover, &.hover {
       .border-radius(10px);
       background-color: @color-bi-background-hover-slider-button;
-      width: 16px;
-      height: 16px;
-      top: 4px;
-      left: -10px;
+      width: 12px;
+      height: 12px;
+      top: 6px;
+      left: -8px;
+      .box-shadow(0 2px 4px 1px,rgba(0, 35, 11, 20%));
     }
     &.disabled {
       border-color: @color-bi-border-disabled-slider-button;
diff --git a/src/widget/date/calendar/combo.year.date.js b/src/widget/date/calendar/combo.year.date.js
index 348949da9..c8e72580b 100644
--- a/src/widget/date/calendar/combo.year.date.js
+++ b/src/widget/date/calendar/combo.year.date.js
@@ -28,7 +28,8 @@ BI.YearDateCombo = BI.inherit(BI.Trigger, {
             type: "bi.year_popup",
             behaviors: o.behaviors,
             min: o.min,
-            max: o.max
+            max: o.max,
+            width: 122
         });
 
         this.popup.on(BI.YearPopup.EVENT_CHANGE, function () {
diff --git a/src/widget/date/calendar/popup.month.js b/src/widget/date/calendar/popup.month.js
index 195b9302f..32fa25698 100644
--- a/src/widget/date/calendar/popup.month.js
+++ b/src/widget/date/calendar/popup.month.js
@@ -31,7 +31,7 @@ BI.MonthPopup = BI.inherit(BI.Widget, {
                 columns: 2,
                 rows: 6,
                 columnSize: [1 / 2, 1 / 2],
-                rowSize: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT + 1
+                rowSize: BI.SIZE_CONSANTS.DATE_LIST_ITEM_HEIGHT + 1
             })), {
                 type: "bi.center_adapt",
                 vgap: 1,
@@ -68,7 +68,7 @@ BI.MonthPopup = BI.inherit(BI.Widget, {
                     whiteSpace: "nowrap",
                     once: false,
                     forceSelected: true,
-                    height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT - 1,
+                    height: BI.SIZE_CONSANTS.DATE_LIST_ITEM_HEIGHT - 1,
                     width: 38,
                     value: td,
                     text: td,
diff --git a/src/widget/dynamicdate/dynamicdate.combo.js b/src/widget/dynamicdate/dynamicdate.combo.js
index c587425cb..367c52054 100644
--- a/src/widget/dynamicdate/dynamicdate.combo.js
+++ b/src/widget/dynamicdate/dynamicdate.combo.js
@@ -30,24 +30,25 @@ BI.DynamicDateCombo = BI.inherit(BI.Single, {
         this.storeTriggerValue = "";
         var date = BI.getDate();
         this.storeValue = opts.value;
+        var border = opts.simple ? 1 : 2;
 
         return {
             type: "bi.absolute",
             items: [{
                 el: {
                     type: "bi.htape",
-                    cls: "bi-border bi-border-radius bi-focus-shadow",
+                    cls: (opts.simple ? "bi-border-bottom" : "bi-border") + " bi-border-radius bi-focus-shadow",
                     items: [{
                         el: {
                             type: "bi.icon_button",
                             cls: "bi-trigger-icon-button date-change-h-font",
-                            width: opts.height - 2,
-                            height: opts.height - 2,
+                            width: opts.height - border,
+                            height: opts.height - border,
                             ref: function () {
                                 self.changeIcon = this;
                             }
                         },
-                        width: opts.height - 2
+                        width: opts.height - border
                     }, {
                         type: "bi.absolute",
                         items: [{
@@ -63,12 +64,13 @@ BI.DynamicDateCombo = BI.inherit(BI.Single, {
                                 destroyWhenHide: true,
                                 el: {
                                     type: "bi.dynamic_date_trigger",
+                                    simple: opts.simple,
                                     min: opts.minDate,
                                     max: opts.maxDate,
                                     format: opts.format,
                                     allowEdit: opts.allowEdit,
                                     watermark: opts.watermark,
-                                    height: opts.height - 2,
+                                    height: opts.height - border,
                                     value: opts.value,
                                     ref: function () {
                                         self.trigger = this;
@@ -112,11 +114,13 @@ BI.DynamicDateCombo = BI.inherit(BI.Single, {
                                                     month: date.getMonth() + 1
                                                 }
                                             };
+                                            self.comboWrapper.element.addClass("error");
                                             self.fireEvent(BI.DynamicDateCombo.EVENT_ERROR);
                                         }
                                     }, {
                                         eventName: BI.DynamicDateTrigger.EVENT_VALID,
                                         action: function () {
+                                            self.comboWrapper.element.removeClass("error");
                                             self.fireEvent(BI.DynamicDateCombo.EVENT_VALID);
                                         }
                                     }, {
@@ -226,8 +230,8 @@ BI.DynamicDateCombo = BI.inherit(BI.Single, {
                             el: {
                                 type: "bi.icon_button",
                                 cls: "bi-trigger-icon-button date-font",
-                                width: opts.height - 2,
-                                height: opts.height - 2,
+                                width: opts.height - border,
+                                height: opts.height - border,
                                 listeners: [{
                                     eventName: BI.IconButton.EVENT_CHANGE,
                                     action: function () {
@@ -271,7 +275,7 @@ BI.DynamicDateCombo = BI.inherit(BI.Single, {
         switch (type) {
             case BI.DynamicDateCombo.Dynamic:
                 this.changeIcon.setVisible(true);
-                this.comboWrapper.attr("items")[0].width = o.height - 2;
+                this.comboWrapper.attr("items")[0].width = o.height - this.options.simple ? 1 : 2;
                 this.comboWrapper.resize();
                 break;
             default:
diff --git a/src/widget/dynamicdate/dynamicdate.popup.js b/src/widget/dynamicdate/dynamicdate.popup.js
index 9e058e921..b2d0e76ef 100644
--- a/src/widget/dynamicdate/dynamicdate.popup.js
+++ b/src/widget/dynamicdate/dynamicdate.popup.js
@@ -5,7 +5,7 @@ BI.DynamicDatePopup = BI.inherit(BI.Widget, {
 
     props: {
         baseCls: "bi-dynamic-date-popup",
-        width: 248,
+        width: 272,
         supportDynamic: true,
     },
 
diff --git a/src/widget/dynamicdate/dynamicdate.trigger.js b/src/widget/dynamicdate/dynamicdate.trigger.js
index 807d6e3a5..87b2b6b1f 100644
--- a/src/widget/dynamicdate/dynamicdate.trigger.js
+++ b/src/widget/dynamicdate/dynamicdate.trigger.js
@@ -24,6 +24,7 @@ BI.DynamicDateTrigger = BI.inherit(BI.Trigger, {
         this.storeTriggerValue = "";
         this.editor = BI.createWidget({
             type: "bi.sign_editor",
+            simple: o.simple,
             height: o.height,
             validationChecker: function (v) {
                 var formatStr = self._getStandardDateStr(v);
diff --git a/src/widget/dynamicdatetime/dynamicdatetime.combo.js b/src/widget/dynamicdatetime/dynamicdatetime.combo.js
index ae201b041..35d20066c 100644
--- a/src/widget/dynamicdatetime/dynamicdatetime.combo.js
+++ b/src/widget/dynamicdatetime/dynamicdatetime.combo.js
@@ -30,24 +30,25 @@ BI.DynamicDateTimeCombo = BI.inherit(BI.Single, {
         this.storeTriggerValue = "";
         var date = BI.getDate();
         this.storeValue = opts.value;
+        var border = opts.simple ? 1 : 2;
 
         return {
             type: "bi.absolute",
             items: [{
                 el: {
                     type: "bi.htape",
-                    cls: "bi-border bi-border-radius bi-focus-shadow",
+                    cls: (opts.simple ? "bi-border-bottom" : "bi-border") + " bi-border-radius bi-focus-shadow",
                     items: [{
                         el: {
                             type: "bi.icon_button",
                             cls: "bi-trigger-icon-button date-change-h-font",
-                            width: opts.height - 2,
-                            height: opts.height - 2,
+                            width: opts.height - border,
+                            height: opts.height - border,
                             ref: function () {
                                 self.changeIcon = this;
                             }
                         },
-                        width: opts.height - 2
+                        width: opts.height - border
                     }, {
                         type: "bi.absolute",
                         items: [{
@@ -64,12 +65,13 @@ BI.DynamicDateTimeCombo = BI.inherit(BI.Single, {
                                 isNeedAdjustWidth: opts.isNeedAdjustWidth,
                                 el: {
                                     type: "bi.dynamic_date_time_trigger",
+                                    simple: opts.simple,
                                     min: opts.minDate,
                                     max: opts.maxDate,
                                     allowEdit: opts.allowEdit,
                                     watermark: opts.watermark,
                                     format: opts.format,
-                                    height: opts.height - 2,
+                                    height: opts.height - border,
                                     value: opts.value,
                                     ref: function () {
                                         self.trigger = this;
@@ -118,11 +120,13 @@ BI.DynamicDateTimeCombo = BI.inherit(BI.Single, {
                                                     month: date.getMonth() + 1
                                                 }
                                             };
+                                            self.comboWrapper.element.addClass("error");
                                             self.fireEvent(BI.DynamicDateTimeCombo.EVENT_ERROR);
                                         }
                                     }, {
                                         eventName: BI.DynamicDateTimeTrigger.EVENT_VALID,
                                         action: function () {
+                                            self.comboWrapper.element.removeClass("error");
                                             self.fireEvent(BI.DynamicDateTimeCombo.EVENT_VALID);
                                         }
                                     }, {
@@ -235,8 +239,8 @@ BI.DynamicDateTimeCombo = BI.inherit(BI.Single, {
                             el: {
                                 type: "bi.icon_button",
                                 cls: "bi-trigger-icon-button date-font",
-                                width: opts.height - 2,
-                                height: opts.height - 2,
+                                width: opts.height - border,
+                                height: opts.height - border,
                                 listeners: [{
                                     eventName: BI.IconButton.EVENT_CHANGE,
                                     action: function () {
@@ -280,7 +284,7 @@ BI.DynamicDateTimeCombo = BI.inherit(BI.Single, {
         switch (type) {
             case BI.DynamicDateTimeCombo.Dynamic:
                 this.changeIcon.setVisible(true);
-                this.comboWrapper.attr("items")[0].width = o.height - 2;
+                this.comboWrapper.attr("items")[0].width = o.height - this.options.simple ? 1 : 2;
                 this.comboWrapper.resize();
                 break;
             default:
diff --git a/src/widget/dynamicdatetime/dynamicdatetime.popup.js b/src/widget/dynamicdatetime/dynamicdatetime.popup.js
index 91c2fb2d1..d4b30b141 100644
--- a/src/widget/dynamicdatetime/dynamicdatetime.popup.js
+++ b/src/widget/dynamicdatetime/dynamicdatetime.popup.js
@@ -6,7 +6,7 @@ BI.DynamicDateTimePopup = BI.inherit(BI.Widget, {
 
     props: {
         baseCls: "bi-dynamic-date-time-popup",
-        width: 248,
+        width: 272,
         supportDynamic: true,
     },
 
diff --git a/src/widget/dynamicdatetime/dynamicdatetime.trigger.js b/src/widget/dynamicdatetime/dynamicdatetime.trigger.js
index 6e23f3654..7074d6ca1 100644
--- a/src/widget/dynamicdatetime/dynamicdatetime.trigger.js
+++ b/src/widget/dynamicdatetime/dynamicdatetime.trigger.js
@@ -24,6 +24,7 @@ BI.DynamicDateTimeTrigger = BI.inherit(BI.Trigger, {
         this.storeTriggerValue = "";
         this.editor = BI.createWidget({
             type: "bi.sign_editor",
+            simple: o.simple,
             height: o.height,
             validationChecker: function (v) {
                 var formatStr = self._getStandardDateStr(v);
diff --git a/src/widget/editor/editor.search.js b/src/widget/editor/editor.search.js
index 5ab35b31e..af9a14614 100644
--- a/src/widget/editor/editor.search.js
+++ b/src/widget/editor/editor.search.js
@@ -2,10 +2,10 @@
  * Created by roy on 15/9/14.
  */
 BI.SearchEditor = BI.inherit(BI.Widget, {
-    _defaultConfig: function () {
+    _defaultConfig: function (config) {
         var conf = BI.SearchEditor.superclass._defaultConfig.apply(this, arguments);
         return BI.extend(conf, {
-            baseCls: "bi-search-editor bi-border bi-focus-shadow",
+            baseCls: "bi-search-editor bi-focus-shadow " + (config.simple ? "bi-border-bottom" : "bi-border"),
             height: 24,
             errorText: "",
             watermark: BI.i18nText("BI-Basic_Search"),
@@ -14,11 +14,12 @@ BI.SearchEditor = BI.inherit(BI.Widget, {
         });
     },
     _init: function () {
-        this.options.height -= 2;
+        this.options.height -= this.options.simple ? 1 : 2;
         BI.SearchEditor.superclass._init.apply(this, arguments);
         var self = this, o = this.options;
         this.editor = BI.createWidget(o.el, {
             type: "bi.editor",
+            simple: o.simple,
             height: o.height,
             watermark: o.watermark,
             allowBlank: true,
diff --git a/src/widget/editor/editor.text.js b/src/widget/editor/editor.text.js
index 7109b9d96..aa68dcd10 100644
--- a/src/widget/editor/editor.text.js
+++ b/src/widget/editor/editor.text.js
@@ -4,10 +4,10 @@
  * @extends BI.Single
  */
 BI.TextEditor = BI.inherit(BI.Widget, {
-    _defaultConfig: function () {
+    _defaultConfig: function (config) {
         var conf = BI.TextEditor.superclass._defaultConfig.apply(this, arguments);
         return BI.extend(conf, {
-            extraCls: "bi-text-editor bi-border bi-focus-shadow",
+            extraCls: "bi-text-editor bi-focus-shadow " + (config.simple ? "bi-border-bottom" : "bi-border"),
             hgap: 4,
             vgap: 2,
             lgap: 0,
@@ -26,15 +26,17 @@ BI.TextEditor = BI.inherit(BI.Widget, {
     _init: function () {
         BI.TextEditor.superclass._init.apply(this, arguments);
         var self = this, o = this.options;
+        var border = o.simple ? 1 : 2;
         if (BI.isNumber(o.height)) {
-            this.element.css({height: o.height - 2});
+            this.element.css({height: o.height - border});
         }
         if (BI.isNumber(o.width)) {
-            this.element.css({width: o.width - 2});
+            this.element.css({width: o.width - border});
         }
         this.editor = BI.createWidget({
             type: "bi.editor",
-            height: o.height - 2,
+            simple: o.simple,
+            height: o.height - border,
             hgap: o.hgap,
             vgap: o.vgap,
             lgap: o.lgap,
diff --git a/src/widget/intervalslider/intervalslider.js b/src/widget/intervalslider/intervalslider.js
index df8d0e796..68f098f37 100644
--- a/src/widget/intervalslider/intervalslider.js
+++ b/src/widget/intervalslider/intervalslider.js
@@ -5,7 +5,7 @@ BI.IntervalSlider = BI.inherit(BI.Single, {
     _constant: {
         EDITOR_WIDTH: 58,
         EDITOR_R_GAP: 60,
-        EDITOR_HEIGHT: 30,
+        EDITOR_HEIGHT: 20,
         SLIDER_WIDTH_HALF: 15,
         SLIDER_WIDTH: 30,
         SLIDER_HEIGHT: 30,
@@ -49,7 +49,8 @@ BI.IntervalSlider = BI.inherit(BI.Single, {
             cls: "slider-editor-button",
             text: this.options.unit,
             allowBlank: false,
-            width: c.EDITOR_WIDTH,
+            width: c.EDITOR_WIDTH - 2,
+            height: c.EDITOR_HEIGHT - 2,
             validationChecker: function (v) {
                 return self._checkValidation(v);
             }
@@ -76,7 +77,8 @@ BI.IntervalSlider = BI.inherit(BI.Single, {
             cls: "slider-editor-button",
             text: this.options.unit,
             allowBlank: false,
-            width: c.EDITOR_WIDTH,
+            width: c.EDITOR_WIDTH - 2,
+            height: c.EDITOR_HEIGHT - 2,
             validationChecker: function (v) {
                 return self._checkValidation(v);
             }
diff --git a/src/widget/multilayerselecttree/multilayerselecttree.combo.js b/src/widget/multilayerselecttree/multilayerselecttree.combo.js
index 472c2d1cd..a0a2d6366 100644
--- a/src/widget/multilayerselecttree/multilayerselecttree.combo.js
+++ b/src/widget/multilayerselecttree/multilayerselecttree.combo.js
@@ -75,7 +75,7 @@ BI.MultiLayerSelectTreeCombo = BI.inherit(BI.Widget, {
         var self = this, o = this.options;
         return {
             type: "bi.combo",
-            cls: "bi-border bi-border-radius",
+            cls: (o.simple ? "bi-border-bottom" : "bi-border") + " bi-border-radius",
             container: o.container,
             destroyWhenHide: o.destroyWhenHide,
             adjustLength: 2,
diff --git a/src/widget/multilayersingletree/multilayersingletree.combo.js b/src/widget/multilayersingletree/multilayersingletree.combo.js
index 48d2c0b9d..a161c3c27 100644
--- a/src/widget/multilayersingletree/multilayersingletree.combo.js
+++ b/src/widget/multilayersingletree/multilayersingletree.combo.js
@@ -79,7 +79,7 @@ BI.MultiLayerSingleTreeCombo = BI.inherit(BI.Widget, {
         var self = this, o = this.options;
         return {
             type: "bi.combo",
-            cls: "bi-border bi-border-radius",
+            cls: (o.simple ? "bi-border-bottom" : "bi-border") + " bi-border-radius",
             container: o.container,
             destroyWhenHide: o.destroyWhenHide,
             adjustLength: 2,
diff --git a/src/widget/multiselect/multiselect.combo.js b/src/widget/multiselect/multiselect.combo.js
index c02b8e731..d5047405f 100644
--- a/src/widget/multiselect/multiselect.combo.js
+++ b/src/widget/multiselect/multiselect.combo.js
@@ -123,7 +123,7 @@ BI.MultiSelectCombo = BI.inherit(BI.Single, {
 
         this.combo = BI.createWidget({
             type: "bi.combo",
-            cls: "bi-border bi-border-radius",
+            cls: (o.simple ? "bi-border-bottom" : "bi-border") + " bi-border-radius",
             toggle: !o.allowEdit,
             container: o.container,
             el: this.trigger,
diff --git a/src/widget/multiselect/multiselect.combo.nobar.js b/src/widget/multiselect/multiselect.combo.nobar.js
index 49b6f6d41..4cdc69560 100644
--- a/src/widget/multiselect/multiselect.combo.nobar.js
+++ b/src/widget/multiselect/multiselect.combo.nobar.js
@@ -122,7 +122,7 @@ BI.MultiSelectNoBarCombo = BI.inherit(BI.Single, {
 
         this.combo = BI.createWidget({
             type: "bi.combo",
-            cls: "bi-border bi-border-radius",
+            cls: (o.simple ? "bi-border-bottom" : "bi-border") + " bi-border-radius",
             toggle: false,
             container: o.container,
             el: this.trigger,
diff --git a/src/widget/multiselect/multiselect.insert.combo.js b/src/widget/multiselect/multiselect.insert.combo.js
index af2c44f97..3ba055f46 100644
--- a/src/widget/multiselect/multiselect.insert.combo.js
+++ b/src/widget/multiselect/multiselect.insert.combo.js
@@ -125,7 +125,7 @@ BI.MultiSelectInsertCombo = BI.inherit(BI.Single, {
 
         this.combo = BI.createWidget({
             type: "bi.combo",
-            cls: "bi-border bi-border-radius",
+            cls: (o.simple ? "bi-border-bottom" : "bi-border") + " bi-border-radius",
             toggle: !o.allowEdit,
             el: this.trigger,
             adjustLength: 1,
diff --git a/src/widget/multiselect/multiselect.insert.combo.nobar.js b/src/widget/multiselect/multiselect.insert.combo.nobar.js
index 00ac76506..3c33de408 100644
--- a/src/widget/multiselect/multiselect.insert.combo.nobar.js
+++ b/src/widget/multiselect/multiselect.insert.combo.nobar.js
@@ -117,7 +117,7 @@ BI.MultiSelectInsertNoBarCombo = BI.inherit(BI.Single, {
 
         this.combo = BI.createWidget({
             type: "bi.combo",
-            cls: "bi-border bi-border-radius",
+            cls: (o.simple ? "bi-border-bottom" : "bi-border") + " bi-border-radius",
             toggle: false,
             container: o.container,
             el: this.trigger,
diff --git a/src/widget/multitree/multi.tree.combo.js b/src/widget/multitree/multi.tree.combo.js
index a6763d87e..5c6e177a7 100644
--- a/src/widget/multitree/multi.tree.combo.js
+++ b/src/widget/multitree/multi.tree.combo.js
@@ -49,7 +49,7 @@ BI.MultiTreeCombo = BI.inherit(BI.Single, {
 
         this.combo = BI.createWidget({
             type: "bi.combo",
-            cls: "bi-border bi-border-radius",
+            cls: (o.simple ? "bi-border-bottom" : "bi-border") + " bi-border-radius",
             toggle: !o.allowEdit,
             container: o.container,
             el: this.trigger,
diff --git a/src/widget/multitree/multi.tree.insert.combo.js b/src/widget/multitree/multi.tree.insert.combo.js
index 4e4a62e8d..b82d27f3f 100644
--- a/src/widget/multitree/multi.tree.insert.combo.js
+++ b/src/widget/multitree/multi.tree.insert.combo.js
@@ -65,7 +65,7 @@ BI.MultiTreeInsertCombo = BI.inherit(BI.Single, {
 
         this.combo = BI.createWidget({
             type: "bi.combo",
-            cls: "bi-border bi-border-radius",
+            cls: (o.simple ? "bi-border-bottom" : "bi-border") + " bi-border-radius",
             toggle: !o.allowEdit,
             container: o.container,
             el: this.trigger,
diff --git a/src/widget/multitree/multi.tree.list.combo.js b/src/widget/multitree/multi.tree.list.combo.js
index c4be0a760..018f7f74b 100644
--- a/src/widget/multitree/multi.tree.list.combo.js
+++ b/src/widget/multitree/multi.tree.list.combo.js
@@ -80,7 +80,7 @@ BI.MultiTreeListCombo = BI.inherit(BI.Single, {
 
         this.combo = BI.createWidget({
             type: "bi.combo",
-            cls: "bi-border bi-border-radius",
+            cls: (o.simple ? "bi-border-bottom" : "bi-border") + " bi-border-radius",
             toggle: !o.allowEdit,
             container: o.container,
             el: this.trigger,
diff --git a/src/widget/numbereditor/number.editor.js b/src/widget/numbereditor/number.editor.js
index c68cba4c2..c62497afe 100644
--- a/src/widget/numbereditor/number.editor.js
+++ b/src/widget/numbereditor/number.editor.js
@@ -3,9 +3,9 @@
  * 数值微调器
  */
 BI.NumberEditor = BI.inherit(BI.Widget, {
-    _defaultConfig: function () {
+    _defaultConfig: function (conf) {
         return BI.extend(BI.NumberEditor.superclass._defaultConfig.apply(this, arguments), {
-            baseCls: "bi-number-editor bi-border bi-focus-shadow",
+            baseCls: "bi-number-editor bi-focus-shadow " + (conf.simple ? "bi-border-bottom" : "bi-border"),
             validationChecker: BI.emptyFn,
             valueFormatter: function (v) {
                 return v;
@@ -25,6 +25,7 @@ BI.NumberEditor = BI.inherit(BI.Widget, {
         this.editor = BI.createWidget({
             type: "bi.sign_editor",
             height: o.height - 2,
+            simple: o.simple,
             allowBlank: o.allowBlank,
             value: o.valueFormatter(o.value),
             validationChecker: function (v) {
@@ -42,10 +43,12 @@ BI.NumberEditor = BI.inherit(BI.Widget, {
         this.editor.on(BI.TextEditor.EVENT_ERROR, function () {
             o.value = BI.parseFloat(this.getLastValidValue());
             self._checkAdjustDisabled(o.value);
+            self.element.addClass("error");
         });
         this.editor.on(BI.TextEditor.EVENT_VALID, function () {
             o.value = BI.parseFloat(this.getValue());
             self._checkAdjustDisabled(o.value);
+            self.element.removeClass("error");
         });
         this.editor.on(BI.TextEditor.EVENT_CONFIRM, function () {
             self.fireEvent(BI.NumberEditor.EVENT_CONFIRM);
@@ -54,7 +57,7 @@ BI.NumberEditor = BI.inherit(BI.Widget, {
             type: "bi.icon_button",
             forceNotSelected: true,
             trigger: "lclick,",
-            cls: "add-up-font top-button bi-border-left bi-list-item-active2 icon-size-12"
+            cls: (o.simple ? "solid-triangle-top-font " : "add-up-font bi-border-left ") + "top-button bi-list-item-active2 icon-size-12"
         });
         this.topBtn.on(BI.IconButton.EVENT_CHANGE, function () {
             self._finetuning(o.step);
@@ -65,7 +68,7 @@ BI.NumberEditor = BI.inherit(BI.Widget, {
             type: "bi.icon_button",
             trigger: "lclick,",
             forceNotSelected: true,
-            cls: "minus-down-font bottom-button bi-border-left bi-list-item-active2 icon-size-12"
+            cls: (o.simple ? "solid-triangle-bottom-font " : "minus-down-font bi-border-left ") + "bottom-button bi-list-item-active2 icon-size-12"
         });
         this.bottomBtn.on(BI.IconButton.EVENT_CHANGE, function () {
             self._finetuning(-o.step);
diff --git a/src/widget/numberinterval/singleeditor/single.editor.js b/src/widget/numberinterval/singleeditor/single.editor.js
index 386c19bdc..ac7738d9f 100644
--- a/src/widget/numberinterval/singleeditor/single.editor.js
+++ b/src/widget/numberinterval/singleeditor/single.editor.js
@@ -12,6 +12,7 @@ BI.NumberIntervalSingleEidtor = BI.inherit(BI.Single, {
             type: "bi.vertical",
             items: [{
                 type: "bi.editor",
+                simple: o.simple,
                 ref: function (_ref) {
                     self.editor = _ref;
                 },
diff --git a/src/widget/singleselect/singleselect.combo.js b/src/widget/singleselect/singleselect.combo.js
index 729b666ef..0cfb9cc48 100644
--- a/src/widget/singleselect/singleselect.combo.js
+++ b/src/widget/singleselect/singleselect.combo.js
@@ -82,7 +82,7 @@ BI.SingleSelectCombo = BI.inherit(BI.Single, {
 
         this.combo = BI.createWidget({
             type: "bi.combo",
-            cls: "bi-border bi-border-radius",
+            cls: (o.simple ? "bi-border-bottom" : "bi-border") + " bi-border-radius",
             container: o.container,
             toggle: false,
             el: this.trigger,
diff --git a/src/widget/singleselect/singleselect.insert.combo.js b/src/widget/singleselect/singleselect.insert.combo.js
index fc5d7db7a..66bdb0c47 100644
--- a/src/widget/singleselect/singleselect.insert.combo.js
+++ b/src/widget/singleselect/singleselect.insert.combo.js
@@ -93,7 +93,7 @@ BI.SingleSelectInsertCombo = BI.inherit(BI.Single, {
 
         this.combo = BI.createWidget({
             type: "bi.combo",
-            cls: "bi-border bi-border-radius",
+            cls: (o.simple ? "bi-border-bottom" : "bi-border") + " bi-border-radius",
             container: o.container,
             toggle: false,
             el: this.trigger,
diff --git a/src/widget/singleslider/button/editor.sign.text.js b/src/widget/singleslider/button/editor.sign.text.js
index d2b91930a..281c7b0e1 100644
--- a/src/widget/singleslider/button/editor.sign.text.js
+++ b/src/widget/singleslider/button/editor.sign.text.js
@@ -14,6 +14,7 @@ BI.SignTextEditor = BI.inherit(BI.Widget, {
         var self = this, o = this.options;
         this.editor = BI.createWidget({
             type: "bi.editor",
+            simple: o.simple,
             height: o.height,
             hgap: 4,
             vgap: 2,
diff --git a/src/widget/singleslider/singleslider.js b/src/widget/singleslider/singleslider.js
index 12aba0196..f0fa756b2 100644
--- a/src/widget/singleslider/singleslider.js
+++ b/src/widget/singleslider/singleslider.js
@@ -4,7 +4,7 @@
 BI.SingleSlider = BI.inherit(BI.Single, {
     _constant: {
         EDITOR_WIDTH: 90,
-        EDITOR_HEIGHT: 30,
+        EDITOR_HEIGHT: 20,
         SLIDER_WIDTH_HALF: 15,
         SLIDER_WIDTH: 30,
         SLIDER_HEIGHT: 30,
@@ -79,6 +79,7 @@ BI.SingleSlider = BI.inherit(BI.Single, {
             cls: "slider-editor-button",
             text: o.unit,
             width: c.EDITOR_WIDTH - 2,
+            height: c.EDITOR_HEIGHT - 2,
             allowBlank: false,
             textAlign: "center",
             validationChecker: function (v) {
@@ -126,7 +127,7 @@ BI.SingleSlider = BI.inherit(BI.Single, {
                 width: "100%"
             }, {
                 el: {
-                    type: "bi.vertical",
+                    type: "bi.vertical_adapt",
                     items: [{
                         type: "bi.horizontal_auto",
                         items: [this.label]
diff --git a/src/widget/singletree/singletree.combo.js b/src/widget/singletree/singletree.combo.js
index e3d884ce4..ce6d255d4 100644
--- a/src/widget/singletree/singletree.combo.js
+++ b/src/widget/singletree/singletree.combo.js
@@ -4,9 +4,9 @@
  */
 BI.SingleTreeCombo = BI.inherit(BI.Widget, {
 
-    _defaultConfig: function () {
+    _defaultConfig: function (config) {
         return BI.extend(BI.SingleTreeCombo.superclass._defaultConfig.apply(this, arguments), {
-            baseCls: "bi-single-tree-combo bi-border bi-border-radius",
+            baseCls: "bi-single-tree-combo bi-border-radius " + (config.simple ? "bi-border-bottom" : "bi-border"),
             trigger: {},
             height: 24,
             text: "",
diff --git a/src/widget/textvaluedownlistcombo/combo.textvaluedownlist.js b/src/widget/textvaluedownlistcombo/combo.textvaluedownlist.js
index 9479c68fe..ff56fff45 100644
--- a/src/widget/textvaluedownlistcombo/combo.textvaluedownlist.js
+++ b/src/widget/textvaluedownlistcombo/combo.textvaluedownlist.js
@@ -3,9 +3,9 @@
  * @extend BI.Widget
  */
 BI.TextValueDownListCombo = BI.inherit(BI.Widget, {
-    _defaultConfig: function () {
+    _defaultConfig: function (config) {
         return BI.extend(BI.TextValueDownListCombo.superclass._defaultConfig.apply(this, arguments), {
-            baseCls: "bi-text-value-down-list-combo bi-border",
+            baseCls: "bi-text-value-down-list-combo " + (config.simple ? "bi-border-bottom" : "bi-border"),
             height: 24,
         });
     },
diff --git a/src/widget/year/combo.year.js b/src/widget/year/combo.year.js
index eb94f34b9..0770ed3c8 100644
--- a/src/widget/year/combo.year.js
+++ b/src/widget/year/combo.year.js
@@ -13,11 +13,13 @@ BI.DynamicYearCombo = BI.inherit(BI.Widget, {
         var self = this, o = this.options;
         BI.DynamicYearCombo.superclass._init.apply(this, arguments);
         this.storeValue = o.value;
+        var border = o.simple ? 1 : 2;
         this.trigger = BI.createWidget({
             type: "bi.dynamic_year_trigger",
+            simple: o.simple,
             min: o.minDate,
             max: o.maxDate,
-            height: o.height - 2,
+            height: o.height - border,
             value: o.value || ""
         });
         this.trigger.on(BI.DynamicYearTrigger.EVENT_KEY_DOWN, function () {
@@ -37,9 +39,11 @@ BI.DynamicYearCombo = BI.inherit(BI.Widget, {
         });
         this.trigger.on(BI.DynamicYearTrigger.EVENT_ERROR, function () {
             self.combo.isViewVisible() && self.combo.hideView();
+            self.comboWrapper.element.addClass("error");
             self.fireEvent(BI.DynamicYearCombo.EVENT_ERROR);
         });
         this.trigger.on(BI.DynamicYearTrigger.EVENT_VALID, function () {
+            self.comboWrapper.element.removeClass("error");
             self.fireEvent(BI.DynamicYearCombo.EVENT_VALID);
         });
         this.trigger.on(BI.DynamicYearTrigger.EVENT_CONFIRM, function () {
@@ -124,21 +128,21 @@ BI.DynamicYearCombo = BI.inherit(BI.Widget, {
             items: [{
                 el: {
                     type: "bi.htape",
-                    cls: "bi-border bi-border-radius bi-focus-shadow",
+                    cls: (o.simple ? "bi-border-bottom" : "bi-border") + " bi-border-radius bi-focus-shadow",
                     ref: function () {
                         self.comboWrapper = this;
                     },
                     items: [{
                         el: {
                             type: "bi.icon_button",
-                            cls: "bi-trigger-icon-button date-change-h-font",
-                            width: o.height - 2,
-                            height: o.height - 2,
+                            cls: "bi-trigger-icon-button",
+                            width: o.height - border,
+                            height: o.height - border,
                             ref: function () {
                                 self.changeIcon = this;
                             }
                         },
-                        width: o.height - 2
+                        width: o.height - border
                     }, this.combo]
                 },
                 top: 0,
@@ -158,7 +162,7 @@ BI.DynamicYearCombo = BI.inherit(BI.Widget, {
         switch (type) {
             case BI.DynamicYearCombo.Dynamic:
                 this.changeIcon.setVisible(true);
-                this.comboWrapper.attr("items")[0].width = this.options.height - 2,
+                this.comboWrapper.attr("items")[0].width = this.options.height - this.options.simple ? 1 : 2;
                 this.comboWrapper.resize();
                 break;
             default:
diff --git a/src/widget/year/trigger.year.js b/src/widget/year/trigger.year.js
index 545f422f5..612b51362 100644
--- a/src/widget/year/trigger.year.js
+++ b/src/widget/year/trigger.year.js
@@ -24,6 +24,7 @@ BI.DynamicYearTrigger = BI.inherit(BI.Trigger, {
         var self = this, o = this.options, c = this._const;
         this.editor = BI.createWidget({
             type: "bi.sign_editor",
+            simple: o.simple,
             height: o.height,
             validationChecker: function (v) {
                 return v === "" || (BI.isPositiveInteger(v) && !BI.checkDateVoid(v, 1, 1, o.min, o.max)[0]);
diff --git a/src/widget/yearmonth/card.static.yearmonth.js b/src/widget/yearmonth/card.static.yearmonth.js
index 09ff4ac2f..6483a675b 100644
--- a/src/widget/yearmonth/card.static.yearmonth.js
+++ b/src/widget/yearmonth/card.static.yearmonth.js
@@ -25,7 +25,7 @@ BI.StaticYearMonthCard = BI.inherit(BI.Widget, {
                     whiteSpace: "nowrap",
                     once: false,
                     forceSelected: true,
-                    height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT - 1,
+                    height: BI.SIZE_CONSANTS.DATE_LIST_ITEM_HEIGHT - 1,
                     width: 38,
                     value: td,
                     text: td,
@@ -77,7 +77,7 @@ BI.StaticYearMonthCard = BI.inherit(BI.Widget, {
                         columns: 2,
                         rows: 6,
                         columnSize: [1 / 2, 1 / 2],
-                        rowSize: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT + 1
+                        rowSize: BI.SIZE_CONSANTS.DATE_LIST_ITEM_HEIGHT + 1
                     })), {
                         type: "bi.center_adapt",
                         vgap: 1,
diff --git a/src/widget/yearmonth/combo.yearmonth.js b/src/widget/yearmonth/combo.yearmonth.js
index 4986f7928..4bc1285e9 100644
--- a/src/widget/yearmonth/combo.yearmonth.js
+++ b/src/widget/yearmonth/combo.yearmonth.js
@@ -16,11 +16,13 @@ BI.DynamicYearMonthCombo = BI.inherit(BI.Single, {
         BI.DynamicYearMonthCombo.superclass._init.apply(this, arguments);
         this.storeValue = o.value;
         this.storeTriggerValue = "";
+        var border = o.simple ? 1 : 2;
         this.trigger = BI.createWidget({
             type: "bi.dynamic_year_month_trigger",
+            simple: o.simple,
             min: o.minDate,
             max: o.maxDate,
-            height: o.height - 2,
+            height: o.height - border,
             value: o.value || ""
         });
         this.trigger.on(BI.DynamicYearMonthTrigger.EVENT_KEY_DOWN, function () {
@@ -34,9 +36,11 @@ BI.DynamicYearMonthCombo = BI.inherit(BI.Single, {
         });
         this.trigger.on(BI.DynamicYearMonthTrigger.EVENT_ERROR, function () {
             self.combo.isViewVisible() && self.combo.hideView();
+            self.comboWrapper.element.addClass("error");
             self.fireEvent(BI.DynamicYearMonthCombo.EVENT_ERROR);
         });
         this.trigger.on(BI.DynamicYearMonthTrigger.EVENT_VALID, function () {
+            self.comboWrapper.element.removeClass("error");
             self.fireEvent(BI.DynamicYearMonthCombo.EVENT_VALID);
         });
         this.trigger.on(BI.DynamicYearMonthTrigger.EVENT_CONFIRM, function () {
@@ -128,21 +132,21 @@ BI.DynamicYearMonthCombo = BI.inherit(BI.Single, {
             items: [{
                 el: {
                     type: "bi.htape",
-                    cls: "bi-border bi-border-radius bi-focus-shadow",
+                    cls: (o.simple ? "bi-border-bottom" : "bi-border") + " bi-border-radius bi-focus-shadow",
                     ref: function () {
                         self.comboWrapper = this;
                     },
                     items: [{
                         el: {
                             type: "bi.icon_button",
-                            cls: "bi-trigger-icon-button date-change-h-font",
-                            width:  o.height - 2,
-                            height: o.height - 2,
+                            cls: "bi-trigger-icon-button",
+                            width: o.height - border,
+                            height: o.height - border,
                             ref: function () {
                                 self.changeIcon = this;
                             }
                         },
-                        width:  o.height - 2
+                        width: o.height - border
                     }, this.combo]
                 },
                 top: 0,
@@ -162,7 +166,7 @@ BI.DynamicYearMonthCombo = BI.inherit(BI.Single, {
         switch (type) {
             case BI.DynamicYearMonthCombo.Dynamic:
                 this.changeIcon.setVisible(true);
-                this.comboWrapper.attr("items")[0].width = this.options.height - 2,
+                this.comboWrapper.attr("items")[0].width = this.options.height - this.options.simple ? 1 : 2;
                 this.comboWrapper.resize();
                 break;
             default:
diff --git a/src/widget/yearmonth/trigger.yearmonth.js b/src/widget/yearmonth/trigger.yearmonth.js
index df9ad4843..11a15a785 100644
--- a/src/widget/yearmonth/trigger.yearmonth.js
+++ b/src/widget/yearmonth/trigger.yearmonth.js
@@ -64,6 +64,7 @@ BI.DynamicYearMonthTrigger = BI.inherit(BI.Trigger, {
         var self = this, o = this.options, c = this._const;
         var editor = BI.createWidget({
             type: "bi.sign_editor",
+            simple: o.simple,
             height: o.height,
             validationChecker: function (v) {
                 if (isYear) {
diff --git a/src/widget/yearquarter/combo.yearquarter.js b/src/widget/yearquarter/combo.yearquarter.js
index 85f093e69..c8820fdb3 100644
--- a/src/widget/yearquarter/combo.yearquarter.js
+++ b/src/widget/yearquarter/combo.yearquarter.js
@@ -15,12 +15,14 @@ BI.DynamicYearQuarterCombo = BI.inherit(BI.Widget, {
         var self = this, o = this.options;
         BI.DynamicYearQuarterCombo.superclass._init.apply(this, arguments);
         this.storeValue = o.value;
+        var border = o.simple ? 1 : 2;
         self.storeTriggerValue = "";
         this.trigger = BI.createWidget({
             type: "bi.dynamic_year_quarter_trigger",
+            simple: o.simple,
             min: o.minDate,
             max: o.maxDate,
-            height: o.height - 2,
+            height: o.height - border,
             value: o.value || ""
         });
         this.trigger.on(BI.DynamicYearQuarterTrigger.EVENT_KEY_DOWN, function () {
@@ -34,9 +36,11 @@ BI.DynamicYearQuarterCombo = BI.inherit(BI.Widget, {
         });
         this.trigger.on(BI.DynamicYearQuarterTrigger.EVENT_ERROR, function () {
             self.combo.isViewVisible() && self.combo.hideView();
+            self.comboWrapper.element.addClass("error");
             self.fireEvent(BI.DynamicYearQuarterCombo.EVENT_ERROR);
         });
         this.trigger.on(BI.DynamicYearQuarterTrigger.EVENT_VALID, function () {
+            self.comboWrapper.element.removeClass("error");
             self.fireEvent(BI.DynamicYearMonthCombo.EVENT_VALID);
         });
         this.trigger.on(BI.DynamicYearQuarterTrigger.EVENT_CONFIRM, function () {
@@ -128,21 +132,21 @@ BI.DynamicYearQuarterCombo = BI.inherit(BI.Widget, {
             items: [{
                 el: {
                     type: "bi.htape",
-                    cls: "bi-border bi-border-radius bi-focus-shadow",
+                    cls: (o.simple ? "bi-border-bottom" : "bi-border") + " bi-border-radius bi-focus-shadow",
                     ref: function () {
                         self.comboWrapper = this;
                     },
                     items: [{
                         el: {
                             type: "bi.icon_button",
-                            cls: "bi-trigger-icon-button date-change-h-font",
-                            width: o.height - 2,
-                            height: o.height - 2,
+                            cls: "bi-trigger-icon-button",
+                            width: o.height - border,
+                            height: o.height - border,
                             ref: function () {
                                 self.changeIcon = this;
                             }
                         },
-                        width: o.height - 2
+                        width: o.height - border
                     }, this.combo]
                 },
                 top: 0,
@@ -162,7 +166,7 @@ BI.DynamicYearQuarterCombo = BI.inherit(BI.Widget, {
         switch (type) {
             case BI.DynamicYearQuarterCombo.Dynamic:
                 this.changeIcon.setVisible(true);
-                this.comboWrapper.attr("items")[0].width = this.options.height - 2;
+                this.comboWrapper.attr("items")[0].width = this.options.height - this.options.simple ? 1 : 2;
                 this.comboWrapper.resize();
                 break;
             default:
diff --git a/src/widget/yearquarter/trigger.yearquarter.js b/src/widget/yearquarter/trigger.yearquarter.js
index 097d65110..4e3765c36 100644
--- a/src/widget/yearquarter/trigger.yearquarter.js
+++ b/src/widget/yearquarter/trigger.yearquarter.js
@@ -62,6 +62,7 @@ BI.DynamicYearQuarterTrigger = BI.inherit(BI.Trigger, {
         var self = this, o = this.options, c = this._const;
         var editor = BI.createWidget({
             type: "bi.sign_editor",
+            simple: o.simple,
             height: o.height,
             validationChecker: function (v) {
                 if(isYear) {
diff --git a/webpack/attachments.js b/webpack/attachments.js
index 2bf08a7e6..df460167c 100644
--- a/webpack/attachments.js
+++ b/webpack/attachments.js
@@ -35,6 +35,7 @@ const basicAttachmentMap = {
     ]),
     widget: sync([
         "src/less/widget/**/*.less",
+        "src/less/component/**/*.less",
         "src/widget/**/*.js",
         "src/component/**/*.js",
     ]),
@@ -118,6 +119,7 @@ const bundleWithoutNormalize = [].concat(
     sync([
         "src/less/base/**/*.less",
         "src/less/widget/**/*.less",
+        "src/less/component/**/*.less",
         "public/less/**/*.less",
         "!public/less/app.less",
         // ts的less
@@ -129,6 +131,7 @@ const fineuiWithoutNormalize = [].concat(
     sync([
         "src/less/base/**/*.less",
         "src/less/widget/**/*.less",
+        "src/less/component/**/*.less",
         'ui/less/app.less',
         'ui/less/**/*.less',
     ]),