--- a/devtools/client/themes/webconsole.css
+++ b/devtools/client/themes/webconsole.css
@@ -837,18 +837,45 @@ a.learn-more-link.webconsole-learn-more-
 
 .devtools-toolbar.webconsole-filterbar-secondary {
   display: flex;
   width: 100%;
   align-items: center;
   -moz-user-select: none;
 }
 
-.webconsole-filterbar-primary .devtools-plaininput {
+.webconsole-filter-wrapper {
+  display: flex;
+  flex: 1 1 100%;
+  position: relative;
+}
+
+.webconsole-filter-wrapper .devtools-plaininput {
   flex: 1 1 100%;
+  margin: 1px 3px;
+  border: 1px solid;
+  border-radius: 2px;
+  padding: 4px 10px;
+  border-color: var(--theme-splitter-color);
+}
+
+.webconsole-filter-wrapper .devtools-plaininput:focus {
+  border-color: var(--theme-focus-border-color-textbox);
+  box-shadow: var(--theme-focus-box-shadow-textbox);
+  transition: all 0.2s ease-in-out;
+  outline: none;
+}
+
+.webconsole-filter-wrapper .devtools-searchinput-clear {
+  display: inline-block;
+  top: 4.5px;
+}
+
+.webconsole-filter-wrapper .devtools-plaininput[value=""] + .devtools-searchinput-clear {
+  display: none;
 }
 
 .webconsole-filterbar-primary .filter-checkbox {
   flex-shrink: 0;
   margin: 0 3px;
   display: flex;
   align-items: center;
   -moz-user-select: none;
@@ -1204,9 +1231,9 @@ body #output-container {
   grid-row: 1 / -1;
   grid-column: -1 / -2;
   background-color: var(--theme-sidebar-background);
 }
 
 .split-box.vert.sidebar {
   /* Set to prevent the sidebar from extending past the right edge of the page */
   width: unset;
-}
\ No newline at end of file
+}

--- a/devtools/client/webconsole/new-console-output/components/FilterBar.js
+++ b/devtools/client/webconsole/new-console-output/components/FilterBar.js
@@ -243,23 +243,32 @@ class FilterBar extends Component {
           className: "devtools-separator",
         }),
         dom.button({
           className: "devtools-button devtools-filter-icon" + (
             filterBarVisible ? " checked" : ""),
           title: l10n.getStr("webconsole.toggleFilterButton.tooltip"),
           onClick: this.onClickFilterBarToggle
         }),
-        dom.input({
-          className: "devtools-plaininput text-filter",
-          type: "search",
-          value: filter.text,
-          placeholder: l10n.getStr("webconsole.filterInput.placeholder"),
-          onInput: this.onSearchInput
-        }),
+        dom.div({
+          className: "webconsole-filter-wrapper"
+        },
+          dom.input({
+            className: "devtools-plaininput text-filter",
+            type: "search",
+            value: filter.text,
+            placeholder: l10n.getStr("webconsole.filterInput.placeholder"),
+            onInput: this.onSearchInput
+          }),
+          dom.button({
+            className: "devtools-searchinput-clear",
+            tabIndex: "-1",
+            onClick: this.onClickRemoveTextFilter
+          })
+        ),
         FilterCheckbox({
           label: l10n.getStr("webconsole.enablePersistentLogs.label"),
           title: l10n.getStr("webconsole.enablePersistentLogs.tooltip"),
           onChange: this.onChangePersistToggle,
           checked: persistLogs,
         }),
         sidebarToggle ?
           dom.button({