From 018ea4df16b06b88074d452f6047a3e694982537 Mon Sep 17 00:00:00 2001
From: Adnan-Sait <59290226+Adnan-Sait@users.noreply.github.com>
Date: Tue, 4 Oct 2022 15:42:15 +0530
Subject: [PATCH] Added Styles to override the default autofill style of
 browsers (#140)

* Autofill Styling Fixes #137

* Removed unnecessary comments

* Removed webkit style - lint fixes
---
 src/Components/Form/TextInput/TextInput.scss | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/Components/Form/TextInput/TextInput.scss b/src/Components/Form/TextInput/TextInput.scss
index 52d87d3c..fe4fbd9d 100644
--- a/src/Components/Form/TextInput/TextInput.scss
+++ b/src/Components/Form/TextInput/TextInput.scss
@@ -24,7 +24,7 @@
     background-size: 100% 100%;
     border: unset;
     border-bottom: solid 1px $color-alternative;
-    transition: all 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
+    transition: all 0.2s cubic-bezier(0.64, 0.09, 0.08, 1), background 0s, color 0s;
 
     &:focus {
       background-position: 0 0;
@@ -32,7 +32,17 @@
       outline: none;
       box-shadow: none;
     }
-
+    
+    &:-webkit-autofill {
+      /*
+       * 'background-clip' to make the background transparent.
+       * If a solid color is required use 'box-shadow'.
+      **/
+      background-clip: text !important;
+      -webkit-text-fill-color: $color-main-text;
+      caret-color: $color-main-text;
+    }
+  
     &::placeholder {
       transition: all 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
     }