fix(input): override Chrome autocomplete styles (#12512)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Nov 9, 2022 · cfa54da · cfa54da
1 parent 531887f
commit cfa54da
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 0 deletions.
diff --git a/packages/react/src/components/TextInput/TextInput.stories.js b/packages/react/src/components/TextInput/TextInput.stories.js
@@ -47,6 +47,7 @@ export const TogglePasswordVisibility = () => {
       id="text-input-1"
       labelText="Text input label"
       helperText="Optional help text"
+      autoComplete="true"
     />
   );
 };

diff --git a/packages/styles/scss/components/form/_form.scss b/packages/styles/scss/components/form/_form.scss
@@ -20,6 +20,17 @@
 $input-label-weight: 400 !default;
 
 @mixin form {
+  // Override Chrome autocomplete styles
+  input:-webkit-autofill,
+  input:-webkit-autofill:hover,
+  input:-webkit-autofill:focus,
+  textarea:-webkit-autofill,
+  textarea:-webkit-autofill:hover,
+  textarea:-webkit-autofill:focus {
+    box-shadow: 0 0 0 1000px $field inset;
+    -webkit-text-fill-color: $text-primary;
+  }
+
   .#{$prefix}--fieldset {
     @include reset;
   }