From 7675aeb788f7137b005269191247a51cbd40d0ed Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Wed, 15 Oct 2025 15:10:35 -0400
Subject: [PATCH] Improve autofill background (#1604)

* improve autofill background; fixes #1439

* clumsy fingers
---
 .../docs/docs/resources/changelog.md          |  1 +
 .../webawesome/src/components/input/input.css | 42 +++++++++++++------
 2 files changed, 31 insertions(+), 12 deletions(-)

diff --git a/packages/webawesome/docs/docs/resources/changelog.md b/packages/webawesome/docs/docs/resources/changelog.md
index 5549e7659..f7f14c12d 100644
--- a/packages/webawesome/docs/docs/resources/changelog.md
+++ b/packages/webawesome/docs/docs/resources/changelog.md
@@ -34,6 +34,7 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
 - Fixed an overflow style that was causing tab group content to be unnecessarily truncated [issue:1401]
 - Fixed a bug in `<wa-icon>` that caused icon buttons to render when non-text nodes were slotted in [issue:1475]
 - Fixed a bug in `<wa-tooltip>` that prevented tooltips from showing when disconnecting and then reconnecting to the DOM [issue:1595]
+- Improved autofill styles in `<wa-input>` so they span the entire width of the visual input [issue:1439]
 - Modified `<wa-slider>` to only show the tooltip on the handle being dragged when in range mode [issue:1320]
 
 ## 3.0.0-beta.6
diff --git a/packages/webawesome/src/components/input/input.css b/packages/webawesome/src/components/input/input.css
index ee9da923b..be657138a 100644
--- a/packages/webawesome/src/components/input/input.css
+++ b/packages/webawesome/src/components/input/input.css
@@ -63,22 +63,40 @@
   border-radius: var(--wa-border-radius-pill) !important;
 }
 
-.text-field input,
-.text-field textarea {
-  /*
+.text-field {
+  /* Show autofill styles over the entire text field, not just the native <input> */
+  &:has(:autofill),
+  &:has(:-webkit-autofill) {
+    background-color: var(--wa-color-brand-fill-quiet) !important;
+  }
+
+  input,
+  textarea {
+    /*
     Fixes an alignment issue with placeholders.
     https://github.com/shoelace-style/webawesome/issues/342
   */
-  height: 100%;
+    height: 100%;
 
-  padding: 0;
-  border: none;
-  outline: none;
-  box-shadow: none;
-  margin: 0;
-  cursor: inherit;
-  -webkit-appearance: none;
-  font: inherit;
+    padding: 0;
+    border: none;
+    outline: none;
+    box-shadow: none;
+    margin: 0;
+    cursor: inherit;
+    -webkit-appearance: none;
+    font: inherit;
+
+    /* Turn off Safari's autofill styles */
+    &:-webkit-autofill,
+    &:-webkit-autofill:hover,
+    &:-webkit-autofill:focus,
+    &:-webkit-autofill:active {
+      -webkit-background-clip: text;
+      background-color: transparent;
+      -webkit-text-fill-color: inherit;
+    }
+  }
 }
 
 input {