diff --git a/modules/system/assets/ui/less/toolbar.less b/modules/system/assets/ui/less/toolbar.less
index 791f3411c..370210c86 100644
--- a/modules/system/assets/ui/less/toolbar.less
+++ b/modules/system/assets/ui/less/toolbar.less
@@ -27,7 +27,7 @@
     &:after {
         right: -8px;
     }
-	
+
     .toolbar-item {
         position: relative;
         white-space: nowrap;
@@ -108,22 +108,43 @@ html.mobile {
 }
 
 .clear-input-text {
-     font-size:large;
-     color:#666666;
-     display: inline-block;
-     position: absolute;
-     right: 1px;
-     top: 0;
-     bottom: 0;
-     margin: auto;
-     background-color: #fff;
-     padding-left:7px;
-     height:28px;
-     border: 0;
-}
-    
-.clear-input-text:focus {
-     outline:none;
+    padding: 0 5px;
+    cursor: pointer;
+    background: transparent;
+    border: 0;
+    -webkit-appearance: none;
+    font-size: (@font-size-base * 1.5);
+    font-weight: @close-font-weight;
+    line-height: 1;
+    color: @close-color;
+    text-shadow: @close-text-shadow;
+    font-family: sans-serif;
+    display: inline-block;
+    position: absolute;
+    right: 3px;
+    top: 0;
+    bottom: 0;
+    margin: auto;
+    background-color: #fff;
+    height: 28px;
+
+    > i {
+        .opacity(.2);
+    }
+
+    &:hover,
+    &:focus {
+        color: @close-color;
+        text-decoration: none;
+        cursor: pointer;
+        > i {
+            .opacity(.5);
+        }
+    }
+
+    &:focus {
+         outline: none;
+    }
 }
 
 //
diff --git a/modules/system/assets/ui/storm.css b/modules/system/assets/ui/storm.css
index fea9dbdd1..64f19aa2e 100644
--- a/modules/system/assets/ui/storm.css
+++ b/modules/system/assets/ui/storm.css
@@ -3089,7 +3089,12 @@ a.control-status-list >ul li .status-text.danger:hover {color:#843534}
 .control-toolbar.toolbar-padded {padding:20px}
 [data-control=toolbar] {white-space:nowrap;width:100%;overflow:hidden}
 html.mobile [data-control=toolbar].is-native-drag {overflow:auto;-webkit-overflow-scrolling:touch}
-.clear-input-text {font-size:large;color:#666;display:inline-block;position:absolute;right:1px;top:0;bottom:0;margin:auto;background-color:#fff;padding-left:7px;height:28px;border:0}
+.clear-input-text {padding:0 5px;cursor:pointer;background:transparent;border:0;-webkit-appearance:none;font-size:21px;font-weight:bold;line-height:1;color:#000;text-shadow:0 1px 0 #fff;font-family:sans-serif;display:inline-block;position:absolute;right:3px;top:0;bottom:0;margin:auto;background-color:#fff;height:28px}
+.clear-input-text >i {opacity:0.2;filter:alpha(opacity=20)}
+.clear-input-text:hover,
+.clear-input-text:focus {color:#000;text-decoration:none;cursor:pointer}
+.clear-input-text:hover >i,
+.clear-input-text:focus >i {opacity:0.5;filter:alpha(opacity=50)}
 .clear-input-text:focus {outline:none}
 .control-toolbar.editor-toolbar {padding:0;background:#f2f2f2;border-bottom-right-radius:0;border-bottom-left-radius:0;border-bottom:2px solid #d4d8da}
 .control-toolbar.editor-toolbar .toolbar-item .btn,