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 Experimental badge sh
- Fixed an overflow style that was causing tab group content to be unnecessarily truncated [issue:1401]
- Fixed a bug in `` that caused icon buttons to render when non-text nodes were slotted in [issue:1475]
- Fixed a bug in `` that prevented tooltips from showing when disconnecting and then reconnecting to the DOM [issue:1595]
+- Improved autofill styles in `` so they span the entire width of the visual input [issue:1439]
- Modified `` 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 */
+ &: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 {