diff --git a/public/assets/css/backend.css b/public/assets/css/backend.css
index 14958b6d..0525d7b4 100644
--- a/public/assets/css/backend.css
+++ b/public/assets/css/backend.css
@@ -1642,4 +1642,19 @@ table.table-nowrap thead > tr > th {
 .autocontent .autocontent-caret:hover {
   color: #ccc;
 }
+.btn-commonsearch {
+  transition: all 0.3s ease;
+}
+.btn-commonsearch.searching,
+.btn-commonsearch.searching:focus {
+  background: #444c69;
+  color: #fff;
+  border: none;
+}
+.btn-commonsearch.searching:hover,
+.btn-commonsearch.searching:active,
+.btn-commonsearch.searching:active:hover {
+  background: #3a415a;
+  color: #fff;
+}
 /*# sourceMappingURL=backend.css.map */
\ No newline at end of file
diff --git a/public/assets/js/bootstrap-table-commonsearch.js b/public/assets/js/bootstrap-table-commonsearch.js
index a6c20457..a69c559d 100644
--- a/public/assets/js/bootstrap-table-commonsearch.js
+++ b/public/assets/js/bootstrap-table-commonsearch.js
@@ -215,6 +215,21 @@
             op[name] = sym;
             filter[name] = value;
         });
+        if (that.options.searchCountTips || that.options.searchBtnBg) {
+            var count = 0;
+            $.each(filter, function (key, value) {
+                if ((value === '' || value == null || ($.isArray(value) && value.length === 0))) {
+                    return true;
+                }
+                count++;
+            });
+            if (that.options.searchCountTips) {
+                that.$toolbar.find(".btn-commonsearch > span").text(count).toggleClass("hidden", count === 0);
+            }
+            if (that.options.searchBtnBg) {
+                that.$toolbar.find(".btn-commonsearch").toggleClass("searching", count !== 0);
+            }
+        }
         return {op: op, filter: filter};
     };
 
@@ -244,6 +259,8 @@
         actionForm: "",
         searchFormTemplate: "",
         searchFormVisible: true,
+        searchBtnBg: true,
+        searchCountTips: false,
         searchClass: 'searchit',
         showSearch: true,
         renderDefault: true,
@@ -311,8 +328,11 @@
             html = [];
         if (that.options.showSearch) {
             html.push(sprintf('<div class="columns-%s pull-%s" style="margin-top:10px;margin-bottom:10px;">', this.options.buttonsAlign, this.options.buttonsAlign));
-            html.push(sprintf('<button class="btn btn-default%s' + '" type="button" name="commonSearch" title="%s">', that.options.iconSize === undefined ? '' : ' btn-' + that.options.iconSize, that.options.formatCommonSearch()));
-            html.push(sprintf('<i class="%s %s"></i>', that.options.iconsPrefix, that.options.icons.commonSearchIcon))
+            html.push(sprintf('<button class="btn btn-default btn-commonsearch %s' + '" type="button" name="commonSearch" title="%s">', that.options.iconSize === undefined ? '' : ' btn-' + that.options.iconSize, that.options.formatCommonSearch()));
+            if (that.options.searchCountTips) {
+                html.push(sprintf('<span class="label label-danger hidden">0</span>'));
+            }
+            html.push(sprintf('<i class="%s %s"></i>', that.options.iconsPrefix, that.options.icons.commonSearchIcon));
             html.push('</button></div>');
         }
         if (that.$toolbar.find(".pull-right").length > 0) {
diff --git a/public/assets/less/backend.less b/public/assets/less/backend.less
index fbb718fb..dc4cbb43 100755
--- a/public/assets/less/backend.less
+++ b/public/assets/less/backend.less
@@ -1690,4 +1690,21 @@ table.table-nowrap {
             color: #ccc;
         }
     }
+}
+
+.btn-commonsearch {
+    transition: all 0.3s ease;
+
+    &.searching {
+        &, &:focus {
+            background: @component-active-bg;
+            color: @component-active-color;
+            border: none;
+        }
+
+        &:hover, &:active, &:active:hover {
+            background: darken(@component-active-bg, 5%);
+            color: @component-active-color;
+        }
+    }
 }
\ No newline at end of file