diff --git a/bower.json b/bower.json
index 8b8932098..dff4a77c9 100644
--- a/bower.json
+++ b/bower.json
@@ -38,7 +38,7 @@
     "polymer": "^2.0.0",
     "vaadin-control-state-mixin": "vaadin/vaadin-control-state-mixin#^2.1.1",
     "vaadin-overlay": "vaadin/vaadin-overlay#^3.2.0",
-    "vaadin-text-field": "vaadin/vaadin-text-field#^2.1.1",
+    "vaadin-text-field": "vaadin/vaadin-text-field#^2.3.0",
     "vaadin-themable-mixin": "vaadin/vaadin-themable-mixin#^1.3.2",
     "vaadin-lumo-styles": "vaadin/vaadin-lumo-styles#^1.1.1",
     "vaadin-material-styles": "vaadin/vaadin-material-styles#^1.1.2",
diff --git a/demo/combo-box-basic-demos.html b/demo/combo-box-basic-demos.html
index 7b3d57200..0c7897e98 100644
--- a/demo/combo-box-basic-demos.html
+++ b/demo/combo-box-basic-demos.html
@@ -40,6 +40,23 @@ <h3>Configuring the Combo Box</h3>
       </template>
     </vaadin-demo-snippet>
 
+    <h3>Clear Button</h3>
+
+    <p>Use the clear-button-visible attribute to display the clear button of an individual combobox.</p>
+
+    <vaadin-demo-snippet id="combo-box-basic-demos-clear-button" when-defined="vaadin-combo-box">
+      <template preserve-content>
+        <vaadin-combo-box label="Element" clear-button-visible></vaadin-combo-box>
+        <script>
+          window.addDemoReadyListener('#combo-box-basic-demos-clear-button', function(document) {
+            const comboBox = document.querySelector('vaadin-combo-box');
+            comboBox.items = ['Hydrogen', 'Helium', 'Lithium'];
+            comboBox.value = 'Hydrogen';
+          });
+        </script>
+      </template>
+    </vaadin-demo-snippet>
+
 
     <h3>Allow Custom Values</h3>
     <p>Allow the user to set any value for the field in addition to selecting a value from the dropdown menu.</p>
diff --git a/src/vaadin-combo-box-light.html b/src/vaadin-combo-box-light.html
index ebccdb8f4..d3efc49dd 100644
--- a/src/vaadin-combo-box-light.html
+++ b/src/vaadin-combo-box-light.html
@@ -5,6 +5,7 @@
 -->
 
 <link rel="import" href="../../polymer/polymer-element.html">
+<link rel="import" href="../../vaadin-control-state-mixin/vaadin-control-state-mixin.html">
 <link rel="import" href="../../vaadin-themable-mixin/vaadin-themable-mixin.html">
 <link rel="import" href="../../vaadin-themable-mixin/vaadin-theme-property-mixin.html">
 <link rel="import" href="vaadin-combo-box-mixin.html">
@@ -13,6 +14,11 @@
 
 <dom-module id="vaadin-combo-box-light">
   <template>
+    <style>
+      :host([opened]) {
+        pointer-events: auto;
+      }
+    </style>
 
     <slot></slot>
 
@@ -74,16 +80,18 @@
      * </vaadin-combo-box-light>
      * ```
      * @memberof Vaadin
+     * @mixes Vaadin.ControlStateMixin
      * @mixes Vaadin.ComboBoxDataProviderMixin
      * @mixes Vaadin.ComboBoxMixin
      * @mixes Vaadin.ThemableMixin
      * @mixes Vaadin.ThemePropertyMixin
      */
     class ComboBoxLightElement extends
-      Vaadin.ThemePropertyMixin(
-        Vaadin.ThemableMixin(
-          Vaadin.ComboBoxDataProviderMixin(
-            Vaadin.ComboBoxMixin(Polymer.Element)))) {
+      Vaadin.ControlStateMixin(
+        Vaadin.ThemePropertyMixin(
+          Vaadin.ThemableMixin(
+            Vaadin.ComboBoxDataProviderMixin(
+              Vaadin.ComboBoxMixin(Polymer.Element))))) {
 
       static get is() {
         return 'vaadin-combo-box-light';
@@ -118,10 +126,6 @@
         this._clearElement = this.querySelector('.clear-button');
       }
 
-      get focused() {
-        return this.getRootNode().activeElement === this.inputElement;
-      }
-
       connectedCallback() {
         super.connectedCallback();
         const cssSelector = 'vaadin-text-field,iron-input,paper-input,.paper-input-input,.input';
@@ -150,6 +154,18 @@
           this.inputElement[this._propertyForValue] = value;
         }
       }
+
+      /**
+       * Focusable element used by vaadin-control-state-mixin
+       */
+      get focusElement() {
+        // Needed for focusing a paper-input properly
+        if (this.inputElement && this.inputElement._focusableElement) {
+          return this.inputElement._focusableElement;
+        }
+        // inputElement might not be defined on property changes before ready.
+        return this.inputElement || this;
+      }
     }
 
     customElements.define(ComboBoxLightElement.is, ComboBoxLightElement);
diff --git a/src/vaadin-combo-box.html b/src/vaadin-combo-box.html
index ce0e47fe9..b5563f249 100644
--- a/src/vaadin-combo-box.html
+++ b/src/vaadin-combo-box.html
@@ -33,12 +33,6 @@
         width: 100%;
         min-width: 0;
       }
-
-      :host([disabled]) [part="clear-button"],
-      :host([readonly]) [part="clear-button"],
-      :host(:not([has-value])) [part="clear-button"] {
-        display: none;
-      }
     </style>
 
     <vaadin-text-field part="text-field" id="input"
@@ -63,12 +57,12 @@
 
         on-change="_stopPropagation"
         on-input="_inputValueChanged"
+        clear-button-visible="[[clearButtonVisible]]"
 
         theme$="[[theme]]"
       >
       <slot name="prefix" slot="prefix"></slot>
 
-      <div part="clear-button" id="clearButton" slot="suffix" role="button" aria-label="Clear"></div>
       <div part="toggle-button" id="toggleButton" slot="suffix" role="button" aria-label="Toggle"></div>
 
     </vaadin-text-field>
@@ -210,7 +204,6 @@
        * Part name | Description
        * ----------------|----------------
        * `text-field` | The text field
-       * `clear-button` | The clear button
        * `toggle-button` | The toggle button
        *
        * See [`<vaadin-overlay>` documentation](https://github.com/vaadin/vaadin-overlay/blob/master/src/vaadin-overlay.html)
@@ -338,6 +331,14 @@
             readonly: {
               type: Boolean,
               value: false
+            },
+
+            /**
+             * Set to true to display the clear icon which clears the input.
+             */
+            clearButtonVisible: {
+              type: Boolean,
+              value: false
             }
           };
         }
@@ -361,9 +362,24 @@
         ready() {
           super.ready();
 
-          this._nativeInput = this.$.input.focusElement;
+          this._nativeInput = this.inputElement.focusElement;
           this._toggleElement = this.$.toggleButton;
-          this._clearElement = this.$.clearButton;
+          this._clearElement = this.inputElement.shadowRoot.querySelector('[part="clear-button"]');
+
+          // Stop propagation of Esc in capturing phase so that
+          // vaadin-text-field will not handle Esc as a shortcut
+          // to clear the value.
+          // We need to set this listener for "this.inputElement"
+          // instead of just "this", otherwise keyboard navigation behaviour
+          // breaks a bit on Safari and some related tests fail.
+          this.inputElement.addEventListener('keydown', e => {
+            if (this._isEventKey(e, 'esc')) {
+              this._stopPropagation(e);
+              // Trigger _onEscape method of vaadin-combo-box-mixin because
+              // bubbling phase is not reached.
+              this._onEscape(e);
+            }
+          }, true);
 
           this._nativeInput.setAttribute('role', 'combobox');
           this._nativeInput.setAttribute('aria-autocomplete', 'list');
diff --git a/test/aria.html b/test/aria.html
index fe3d87493..98cf30d5f 100644
--- a/test/aria.html
+++ b/test/aria.html
@@ -35,9 +35,6 @@
     function getToggleIcon() {
       return comboBox._toggleElement;
     }
-    function getClearIcon() {
-      return comboBox._clearElement;
-    }
     function getItemElement(i) {
       return comboBox.$.overlay._selector.querySelectorAll('vaadin-combo-box-item')[i];
     }
@@ -63,8 +60,6 @@
         expect(getNativeInput().hasAttribute('aria-labelledby')).to.be.true;
         expect(getToggleIcon().getAttribute('role')).to.equal('button');
         expect(getToggleIcon().getAttribute('aria-label')).to.equal('Toggle');
-        expect(getClearIcon().getAttribute('role')).to.equal('button');
-        expect(getClearIcon().getAttribute('aria-label')).to.equal('Clear');
       });
     });
 
diff --git a/test/selecting-items.html b/test/selecting-items.html
index 0de2488e9..bbbd3c20a 100644
--- a/test/selecting-items.html
+++ b/test/selecting-items.html
@@ -20,6 +20,12 @@
   </template>
 </test-fixture>
 
+<test-fixture id="combobox-clear">
+  <template>
+    <vaadin-combo-box clear-button-visible style="width: 320px;"></vaadin-combo-box>
+  </template>
+</test-fixture>
+
 <script>
   describe('selecting a value', () => {
     let combobox;
@@ -197,7 +203,7 @@
 
       it('should fire on clear', () => {
         combobox.value = 'foo';
-        fire('click', combobox._clearElement);
+        fire('click', combobox.$.input.$.clearButton);
 
         expect(changeSpy.callCount).to.equal(1);
       });
@@ -262,12 +268,12 @@
     let combobox;
     let clearIcon;
     beforeEach(() => {
-      combobox = fixture('combobox');
+      combobox = fixture('combobox-clear');
       combobox.items = ['foo', 'bar'];
 
       combobox.value = 'foo';
 
-      clearIcon = combobox._clearElement;
+      clearIcon = combobox.inputElement.$.clearButton;
 
       // needed for Edge <= 14 in Polymer 2
       combobox.updateStyles();
@@ -307,7 +313,7 @@
       expect(combobox.opened).to.eql(true);
     });
 
-    it('should cancel down event to avoid input blur', () => {
+    it('should cancel click event to avoid input blur', () => {
       combobox.open();
 
       const event = fire('click', clearIcon);
diff --git a/test/toggling-dropdown.html b/test/toggling-dropdown.html
index f5a006ac6..69136b883 100644
--- a/test/toggling-dropdown.html
+++ b/test/toggling-dropdown.html
@@ -306,10 +306,6 @@
         expect(getComputedStyle(combobox._toggleElement).display).not.to.equal('none');
       });
 
-      it('clearIcon should be hidden when disabled', () => {
-        expect(getComputedStyle(combobox._clearElement).display).to.equal('none');
-      });
-
       it('dropdown should not be shown when disabled', () => {
         combobox.inputElement.dispatchEvent(new CustomEvent('click', {bubbles: true, composed: true}));
         expect(combobox.opened).to.be.false;
@@ -326,10 +322,6 @@
         expect(getComputedStyle(combobox._toggleElement).display).not.to.equal('none');
       });
 
-      it('clearIcon should be hidden when read-only', () => {
-        expect(getComputedStyle(combobox._clearElement).display).to.equal('none');
-      });
-
       it('dropdown should not be shown when read-only', () => {
         combobox.inputElement.dispatchEvent(new CustomEvent('click', {bubbles: true, composed: true}));
         expect(combobox.opened).to.be.false;
diff --git a/test/vaadin-combo-box-light.html b/test/vaadin-combo-box-light.html
index 35083dd70..4e50815c1 100644
--- a/test/vaadin-combo-box-light.html
+++ b/test/vaadin-combo-box-light.html
@@ -203,7 +203,7 @@
     });
 
     describe('vaadin-combo-box-light-paper-input', () => {
-      let comboBox, paperInput;
+      let comboBox;
 
       beforeEach(() => {
         comboBox = fixture('combobox-light-paper-input');
@@ -234,6 +234,111 @@
 
         expect(spy.called).to.be.true;
       });
+
+      describe('custom clear-button', () => {
+        let clearButton;
+
+        /**
+         * Get the most specific element at the given viewport coordinates.
+         * Same as "document.elementFromPoint()" but recursively digging through
+         * shadow roots.
+         */
+        function elementFromPointDeep(x, y, root = document) {
+          const result = root.elementFromPoint(x, y);
+          if (!result) {
+            return null;
+          }
+          if (result === root.host) {
+            return result;
+          }
+          return result.shadowRoot ? elementFromPointDeep(x, y, result.shadowRoot) : result;
+        }
+
+        /**
+         * Simulate a click at the position of the given element.
+         * This can be used for more accurate testing of what would happen
+         * when a user tries to click on a specific element.
+         *
+         * This needs to be used when we need to consider the effect of
+         * possibly overlapping elements or "pointer-events: none"
+         */
+        function clickAtPositionOf(elem) {
+          // Scroll the element into view if it's not already
+          elem.scrollIntoView();
+          // Get the viewport relative position of the element
+          const rect = elem.getBoundingClientRect();
+          if (rect.width === 0 || rect.height === 0) {
+            return;
+          }
+          const x = Math.ceil(rect.x);
+          const y = Math.ceil(rect.y);
+          // Get the element which would be targeted, when the user
+          // tries to click on this position
+          let target = elementFromPointDeep(x, y, elem.ownerDocument);
+          if (!target) {
+            return;
+          }
+
+          // Check if the found element contains a slot (needed for other browsers than Chrome)
+          const slot = target.querySelector('slot');
+          if (slot && slot.assignedNodes({flatten: true}).indexOf(elem) !== -1) {
+            target = elem;
+          }
+
+          fire('click', target);
+        }
+
+        beforeEach(() => {
+          clearButton = comboBox.querySelector('.clear-button');
+          comboBox.value = 'foo';
+        });
+
+        it('should be clickable when overlay is open', () => {
+          const clickSpy = sinon.spy();
+          clearButton.addEventListener('click', clickSpy);
+
+          comboBox.open();
+          clickAtPositionOf(clearButton);
+
+          expect(clickSpy.callCount).to.equal(1);
+        });
+
+        it('should fire `change` event on clear', () => {
+          const changeSpy = sinon.spy();
+          comboBox.addEventListener('change', changeSpy);
+
+          fire('click', clearButton);
+
+          expect(changeSpy.callCount).to.equal(1);
+        });
+
+        it('should clear the selection when clicking on the clear button', () => {
+          comboBox.open();
+    
+          fire('click', clearButton);
+    
+          expect(comboBox.value).to.eql('');
+          expect(comboBox.$.overlay._selectedItem).to.be.null;
+          expect(comboBox.selectedItem).to.be.null;
+        });
+    
+        it('should not close the dropdown after clearing a selection', () => {
+          comboBox.open();
+    
+          fire('click', clearButton);
+    
+          expect(comboBox.opened).to.eql(true);
+        });
+    
+        it('should cancel click event to avoid input blur', () => {
+          comboBox.open();
+    
+          const event = fire('click', clearButton);
+    
+          expect(event.defaultPrevented).to.eql(true);
+        });
+
+      });
     });
 
     describe('theme attribute', () => {
diff --git a/test/vaadin-combo-box.html b/test/vaadin-combo-box.html
index 0340628a8..b15463b38 100644
--- a/test/vaadin-combo-box.html
+++ b/test/vaadin-combo-box.html
@@ -42,6 +42,12 @@
     </template>
   </test-fixture>
 
+  <test-fixture id="combobox-clear">
+    <template>
+      <vaadin-combo-box clear-button-visible></vaadin-combo-box>
+    </template>
+  </test-fixture>
+
   <script>
     describe('Properties', () => {
       let comboBox;
@@ -370,6 +376,44 @@
           ).to.equal('foo');
         });
       });
+
+      describe('no clear-button-visible attribute', () => {
+        let textfield;
+
+        beforeEach(() => {
+          textfield = comboBox.inputElement;
+        });
+
+        it('should not have clear-button-visible by default', () => {
+          expect(comboBox).to.have.property('clearButtonVisible', false);
+          expect(textfield).to.have.property('clearButtonVisible', false);
+        });
+      });
+
+      describe('clear-button-visible attribute', () => {
+        let comboBox, textfield, clearButton;
+
+        beforeEach(() => {
+          comboBox = fixture('combobox-clear');
+          textfield = comboBox.inputElement;
+          clearButton = textfield.$.clearButton;
+        });
+
+        it('should propagate clear-button-visible attribute to textfield', () => {
+          expect(comboBox).to.have.property('clearButtonVisible', true);
+          expect(textfield).to.have.property('clearButtonVisible', true);
+        });
+
+        it('clear button should be hidden when disabled', () => {
+          comboBox.disabled = true;
+          expect(getComputedStyle(clearButton).display).to.equal('none');
+        });
+
+        it('clear button should be hidden when read-only', () => {
+          comboBox.readonly = true;
+          expect(getComputedStyle(clearButton).display).to.equal('none');
+        });
+      });
     });
   </script>
 
diff --git a/test/visual/clear-button.html b/test/visual/clear-button.html
new file mode 100644
index 000000000..7aba05d4d
--- /dev/null
+++ b/test/visual/clear-button.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+
+<head lang="en">
+  <meta charset="UTF-8">
+
+  <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
+  <script>
+    const theme = window.location.search.replace(/.*theme=(\w+).*/, '$1') || 'lumo';
+    document.write(`<link rel="import" href="../../theme/${theme}/vaadin-combo-box.html">`);
+  </script>
+</head>
+
+<body>
+
+  <div id="clear-button-tests" style="padding: 10px;">
+    No value
+    <vaadin-combo-box clear-button-visible></vaadin-combo-box>
+
+    <br>Basic value
+    <vaadin-combo-box clear-button-visible value="Carbon" items='["Carbon"]'></vaadin-combo-box>
+
+    <br>Disabled
+    <vaadin-combo-box clear-button-visible value="Carbon" items='["Carbon"]' disabled></vaadin-combo-box>
+
+    <br>Read-only
+    <vaadin-combo-box clear-button-visible value="Carbon" items='["Carbon"]' readonly></vaadin-combo-box>
+  </div>
+
+</body>
diff --git a/test/visual/screens/vaadin-combo-box/clear-button-tests-lumo/default/chrome.png b/test/visual/screens/vaadin-combo-box/clear-button-tests-lumo/default/chrome.png
new file mode 100644
index 000000000..dfcb2a96f
Binary files /dev/null and b/test/visual/screens/vaadin-combo-box/clear-button-tests-lumo/default/chrome.png differ
diff --git a/test/visual/screens/vaadin-combo-box/clear-button-tests-lumo/default/firefox.png b/test/visual/screens/vaadin-combo-box/clear-button-tests-lumo/default/firefox.png
new file mode 100644
index 000000000..ef0a8b4e0
Binary files /dev/null and b/test/visual/screens/vaadin-combo-box/clear-button-tests-lumo/default/firefox.png differ
diff --git a/test/visual/screens/vaadin-combo-box/clear-button-tests-material/default/chrome.png b/test/visual/screens/vaadin-combo-box/clear-button-tests-material/default/chrome.png
new file mode 100644
index 000000000..df4fcf93c
Binary files /dev/null and b/test/visual/screens/vaadin-combo-box/clear-button-tests-material/default/chrome.png differ
diff --git a/test/visual/screens/vaadin-combo-box/clear-button-tests-material/default/firefox.png b/test/visual/screens/vaadin-combo-box/clear-button-tests-material/default/firefox.png
new file mode 100644
index 000000000..160896956
Binary files /dev/null and b/test/visual/screens/vaadin-combo-box/clear-button-tests-material/default/firefox.png differ
diff --git a/test/visual/screens/vaadin-combo-box/default-tests-lumo/default/chrome.png b/test/visual/screens/vaadin-combo-box/default-tests-lumo/default/chrome.png
index f57fc6c5d..70cc8613d 100644
Binary files a/test/visual/screens/vaadin-combo-box/default-tests-lumo/default/chrome.png and b/test/visual/screens/vaadin-combo-box/default-tests-lumo/default/chrome.png differ
diff --git a/test/visual/screens/vaadin-combo-box/default-tests-lumo/default/firefox.png b/test/visual/screens/vaadin-combo-box/default-tests-lumo/default/firefox.png
index c1560f39e..ff9daa8c8 100644
Binary files a/test/visual/screens/vaadin-combo-box/default-tests-lumo/default/firefox.png and b/test/visual/screens/vaadin-combo-box/default-tests-lumo/default/firefox.png differ
diff --git a/test/visual/screens/vaadin-combo-box/default-tests-material/default/chrome.png b/test/visual/screens/vaadin-combo-box/default-tests-material/default/chrome.png
index 447ecbda7..f5ff5b64d 100644
Binary files a/test/visual/screens/vaadin-combo-box/default-tests-material/default/chrome.png and b/test/visual/screens/vaadin-combo-box/default-tests-material/default/chrome.png differ
diff --git a/test/visual/screens/vaadin-combo-box/default-tests-material/default/firefox.png b/test/visual/screens/vaadin-combo-box/default-tests-material/default/firefox.png
index 8ae0f5920..708898d0a 100644
Binary files a/test/visual/screens/vaadin-combo-box/default-tests-material/default/firefox.png and b/test/visual/screens/vaadin-combo-box/default-tests-material/default/firefox.png differ
diff --git a/test/visual/test.js b/test/visual/test.js
index ecd60d252..1a22189dd 100644
--- a/test/visual/test.js
+++ b/test/visual/test.js
@@ -22,6 +22,13 @@ gemini.suite('vaadin-combo-box', function(rootSuite) {
         .capture('default');
     });
 
+    gemini.suite(`clear-button-tests-${theme}`, function(suite) {
+      suite
+        .setUrl(`clear-button.html?theme=${theme}`)
+        .setCaptureElements('#clear-button-tests')
+        .capture('default');
+    });
+
     gemini.suite(`icons-${theme}`, function(suite) {
       suite
         .setUrl(`icons.html?theme=${theme}`)
diff --git a/theme/lumo/vaadin-combo-box-styles.html b/theme/lumo/vaadin-combo-box-styles.html
index 81a826be4..919ace940 100644
--- a/theme/lumo/vaadin-combo-box-styles.html
+++ b/theme/lumo/vaadin-combo-box-styles.html
@@ -13,10 +13,6 @@
       [part="toggle-button"]::before {
         content: var(--lumo-icons-dropdown);
       }
-
-      [part="clear-button"]::before {
-        content: var(--lumo-icons-cross);
-      }
     </style>
   </template>
 </dom-module>
diff --git a/theme/material/vaadin-combo-box-styles.html b/theme/material/vaadin-combo-box-styles.html
index f6d336ee6..db371f404 100644
--- a/theme/material/vaadin-combo-box-styles.html
+++ b/theme/material/vaadin-combo-box-styles.html
@@ -20,10 +20,6 @@
       :host([opened]) [part="toggle-button"] {
         transform: rotate(180deg);
       }
-
-      [part="clear-button"]::before {
-        content: var(--material-icons-clear);
-      }
     </style>
   </template>
 </dom-module>