diff --git a/src/components/input/input.component.ts b/src/components/input/input.component.ts
index 6a17cbf50..9eca10c53 100644
--- a/src/components/input/input.component.ts
+++ b/src/components/input/input.component.ts
@@ -406,10 +406,8 @@ export default class SlInput extends ShoelaceElement implements ShoelaceFormCont
     const hasHelpTextSlot = this.hasSlotController.test('help-text');
     const hasLabel = this.label ? true : !!hasLabelSlot;
     const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
-    const hasClearIcon =
-      this.clearable && !this.disabled && !this.readonly;
-    const hasClearIconVisible =
-      hasClearIcon && (typeof this.value === 'number' || this.value.length > 0);
+    const hasClearIcon = this.clearable && !this.disabled && !this.readonly;
+    const isClearIconVisible = hasClearIcon && (typeof this.value === 'number' || this.value.length > 0);
 
     return html`
       <div
@@ -495,11 +493,13 @@ export default class SlInput extends ShoelaceElement implements ShoelaceFormCont
               ? html`
                   <button
                     part="clear-button"
-                    class="input__clear"
+                    class=${classMap({
+                      input__clear: true,
+                      'input__clear--visible': isClearIconVisible
+                    })}
                     type="button"
                     aria-label=${this.localize.term('clearEntry')}
                     @click=${this.handleClearClick}
-                    style="visibility: ${hasClearIconVisible?'visible':'hidden'}"
                     tabindex="-1"
                   >
                     <slot name="clear-icon">
diff --git a/src/components/input/input.styles.ts b/src/components/input/input.styles.ts
index 73df57108..105666de4 100644
--- a/src/components/input/input.styles.ts
+++ b/src/components/input/input.styles.ts
@@ -248,6 +248,10 @@ export default css`
    * Clearable + Password Toggle
    */
 
+  .input__clear:not(.input__clear--visible) {
+    visibility: hidden;
+  }
+
   .input__clear,
   .input__password-toggle {
     display: inline-flex;