Tailwind autofill: prefix on form inputs not working

[CaptainZiboo]

Hello there ! 👋

<input type="password" name="password" id="password" placeholder="name@example.com" class="leading-tight text-sm font-normal flex items-center p-0 dark:text-gray-400 placeholder:dark:text-gray-400 bg-transparent border-0 focus:ring-0 autofill:bg-transparent">

I tried to edit the autofill background on form input because it becomes white even when using a dark theme. But it seems that the autofill: prefix just don't work and I can't figure why... Can someone help with that ?

https://tailwindcss.com/docs/hover-focus-and-other-states#autofill

[ZhengRui]

having the same issue here, I manage to change the input background color by this, but no success in changing the font size (the autofilled font size is smaller than after it is filled)

[TheJazzDev]

This would have been a better option but i can't use it because i'm using light and dark mode on my website so i can't customize it here...

[idarshan181]

The same issue, is there any way to modify -webkit-text-fill-color: #fff; property based on className='dark' in the HTML tag?

[King-OJ]

@TheJazzDev did you find an autofill solution for the light and dark mode?

[thedb]

Saved my life

[yurickv]

I've partially solved this by adding to my 'globals.css':

@layer base {
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0px 1000px //your color// inset !important;
-webkit-text-fill-color: //your color//;
}
}

[TheJazzDev]

Same issue here...

[fiskolini]

Same issue on v3.2.3and Firefox 106.0.2 (64-bit)

[lucasjungdeveloper]

Same on v3.2.4 and Chrome 107.0.5304.107

[apetta]

Facing this issue On v3.2.4 & Chrome 108.0.5359.124. Some utilities (like font size) work but bg colours, text colours etc. aren't working.

[nikolalsvk]

I made it work with Autoprefixer as described in Tailwind official docs.

The idea is to install autoprefixer and add it to Tailwind plugins.
You can do it like so:

npm install -D autoprefixer
# or
yarn add -D autoprefixer

Add to tailwind.config.js or your PostCSS config:

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ]
}

Then, it will add rules like -webkit-autofill when you write autofill:something in Tailwind.

To change the autofill background color, you actually need to set the box-shadow like so:

autofill:shadow-[inset_0_0_0px_1000px_rgb(255,255,0)]

That will set an inset box shadow with yellow color on your input field when autofilled.

[NickWoodward]

This works for me, thanks, but I'm still suffering from similar issues for like text color on autofill

[jardieljw]

this 'autofill:shadow...' code to change background color functions even without the plugins, but using 'autofill:bg-black' doesn't work even with the plugin installed

[pipech]

The autofill:shadow-[inset_0_0_0px_1000px_rgb(255,255,0)] is a custom class that uses the box-shadow property to simulate a background color change on autofill.

The reason why autofill:bg-red-500 doesn't work is because browsers have specific styles they apply to autofilled inputs, and these styles are very difficult to override with normal CSS properties like background-color.

However, the box-shadow property is not overridden by the browser's autofill styles, so it can be used to simulate a background color change. The inset 0 0 0px 1000px rgb(255,255,0) value creates an inset (inner) shadow that's so large it covers the entire input, effectively changing its background color to yellow (rgb(255,255,0)).

This is a workaround to the limitation of not being able to directly change the background color of autofilled inputs with CSS.

[MichalMoravik]

This worked for me even without the autoprefixer package. thanks

[aristamaya]

try add "autofill:transition-colors autofill:duration-[5000000ms]"

[Wiktor-Sikora]

it creates annoying problems if you are switching themes

[LucasAven]

In addition to @AydosJs 's answer I also added :enable in order to keep the style after filling the field (the change of the color it's only because of my personal use case):

input:-webkit-autofill,
input:-webkit-autofill:enabled,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:enabled,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:enabled,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
-webkit-text-fill-color: #fff;
-webkit-box-shadow: 0 0 0px 1000px #785100c7 inset;
box-shadow: 0 0 0px 1000px #785100c7 inset;
background-color: #785100c7;
}

[jardieljw]

How do I change text size from autofill? when in the selection box from autofill the text is smaller than the input text

[zuoyi615]

I have same issue on v3.2.4 and Chrome 109.0.5414.119, and autofill:!bg-neutral-800 does not work.
Is there an elegant way to solve it ?

[Kocarik]

Same issue autofill:!bg-neutral-800 not work. I must install npm install -D autoprefixer and then use: autofill:shadow-[inset_0_0_0px_1000px_rgb(255,255,0)]

[kubasobecki]

Still an issue

[ihola777]

autofill:shadow-[inset_0_0_0px_1000px_rgba(var(--background))] for theme color

[hitenvats16]

I'm struggling in changing color on autofill. I added this to the input element class autofill:text-white. Even tried with autofill:!text-white but still no luck. Is anyone there tried above and succeed?

[apetta]

Facing this issue On v3.2.4 & Chrome 108.0.5359.124. Some utilities (like font size) work but bg colours, text colours etc. aren't working.

Just circling back on this. The simplest way to apply autofill styling is to add the following in your global.css file:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {

  .autofill-text:-webkit-autofill {
    -webkit-text-fill-color: white;
  }

  .text-input {
    @apply autofill-text; /* set text colour (white) */
    @apply autofill:shadow-[inset_0_0_0px_1000px_#000]; /* set 'background' colour (black)*/
    @apply autofill:text-2xl; /* set font size */
  }
}

and then use text-input in className prop where desired.

This is working fine as of tailwind 3.4.1 with the default setup.

[ArrayIterator]

I just found issue about dark mode, the input background change to dark.
Just found temporary solution about change the color-scheme: dark to -webkit-autofill

[data-dark-mode-or-maybe-class-onbody] :-webkit-autofill,
[data-dark-mode-or-maybe-class-onbody] :-webkit-autofill:hover,
[data-dark-mode-or-maybe-class-onbody] :-webkit-autofill:focus {
    color-scheme: dark;
}

[DoZ1rN]

Tailwind CSS Autofill and Scrollbar Styling with ShadCN and Dark/Light Mode
If you're using ShadCN and implementing dark and light modes in your project, you might have encountered issues with the background color of autofilled input fields. Here's a solution that worked for me, along with custom scrollbar styling.

the solution:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 256 58% 99%;
    --foreground: 256 56% 1%;
    --muted: 16 30% 87%;
    --muted-foreground: 16 10% 39%;
    --popover: 256 58% 99%;
    --popover-foreground: 256 56% 1%;
    --card: 256 58% 99%;
    --card-foreground: 256 56% 1%;
    --border: 256 10% 91%;
    --input: 256 10% 91%;
    --primary: 256 61% 79%;
    --primary-foreground: 256 61% 19%;
    --secondary: 16 61% 79%;
    --secondary-foreground: 16 61% 19%;
    --accent: 136 61% 79%;
    --accent-foreground: 136 61% 19%;
    --destructive: 0 88% 27%;
    --destructive-foreground: 0 88% 87%;
    --ring: 256 61% 79%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 256 55% 3%;
    --foreground: 256 14% 100%;
    --muted: 16 30% 13%;
    --muted-foreground: 16 10% 61%;
    --popover: 256 55% 3%;
    --popover-foreground: 256 14% 100%;
    --card: 256 55% 3%;
    --card-foreground: 256 14% 100%;
    --border: 256 10% 10%;
    --input: 256 10% 10%;
    --primary: 256 61% 79%;
    --primary-foreground: 256 61% 19%;
    --secondary: 16 61% 79%;
    --secondary-foreground: 16 61% 19%;
    --accent: 136 61% 79%;
    --accent-foreground: 136 61% 19%;
    --destructive: 0 88% 53%;
    --destructive-foreground: 0 0% 100%;
    --ring: 256 61% 79%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply antialiased bg-background text-foreground scroll-smooth;
  }

  ::selection {
    @apply bg-primary text-background;
  }

  ::-webkit-scrollbar {
    @apply w-2 h-2;
  }

  ::-webkit-scrollbar-track {
    @apply bg-muted;
  }

  ::-webkit-scrollbar-thumb {
    @apply rounded-full bg-muted-foreground;
  }

  input:-webkit-autofill,
  textarea:-webkit-autofill,
  select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px hsl(var(--background)) inset !important;
    box-shadow: 0 0 0 1000px hsl(var(--background)) inset !important;
    -webkit-text-fill-color: hsl(var(--foreground)) !important;
  }
}

Root Variables for Light Mode:
In the :root selector, I've defined various CSS variables for colors and styles that apply to light mode. These include --background, --foreground, and other utility colors.

Dark Mode Variables:
For dark mode, the same variables are redefined under the .dark class. This allows for easy toggling between light and dark modes by simply adding or removing the .dark class on the root element.

Base Layer Styles:
I've applied some basic styles using Tailwind CSS's @apply directive. This includes setting border colors, body styles, text selection styles, and custom scrollbar styles.

Autofill Input Styling:
The styles for input:-webkit-autofill, textarea:-webkit-autofill, and select:-webkit-autofill ensure that autofilled inputs match the theme's background and text color. The -webkit-box-shadow and box-shadow properties are used to override the default autofill background with the custom --background color.

Custom Scrollbar:
I've customized the scrollbar's width, track color, and thumb color for a more cohesive look that matches the theme.
This setup ensures that your autofill inputs and scrollbars remain consistent with your theme, whether in light or dark mode. If you have any questions or improvements, feel free to comment below!

1. Root Variables for Light Mode:

• In the :root selector, various CSS variables are defined for colors and styles that apply to light mode. These variables, such as --background, --foreground, and others, are used throughout the stylesheet to ensure consistency. Using CSS variables makes it easy to manage and change theme colors from a single place.

2. Dark Mode Variables:

• For dark mode, the same variables are redefined under the .dark class. This approach allows for easy toggling between light and dark modes by adding or removing the .dark class on the root element. The colors are adjusted to be suitable for dark backgrounds, ensuring good contrast and readability.

3. Base Layer Styles:

• Basic styles are applied using Tailwind CSS's @apply directive. These include setting border colors, body styles, text selection styles, and custom scrollbar styles. The @apply directive allows you to use Tailwind's utility classes within your CSS, which helps maintain a consistent design system.

4. Autofill Input Styling:

• The styles for input:-webkit-autofill, textarea:-webkit-autofill, and select:-webkit-autofill ensure that autofilled inputs match the theme's background and text color. The -webkit-box-shadow and box-shadow properties are used to override the default autofill background with the custom --background color. This is important because browsers typically change the background color of autofilled inputs, which can clash with your theme. By using hsl(var(--background)), the autofill background color is set to match the theme's background, ensuring a seamless appearance.

5. Custom Scrollbar:

• Custom scrollbar styles are defined using pseudo-elements ::-webkit-scrollbar, ::-webkit-scrollbar-track, and ::-webkit-scrollbar-thumb. These styles make the scrollbar's width, track color, and thumb color consistent with the theme. The @apply directive is used here to apply Tailwind's utility classes for width, background color, and border-radius, making the scrollbar look more integrated with the overall design.

6. Applying the text-input Class:

• The .text-input class is defined to apply autofill styles. This class can be added to input fields to ensure consistent styling for autofilled fields. You can use autofill:text-input class to ensure the text color and background color are applied only on browser autofill.

This setup ensures that your autofill inputs and scrollbars remain consistent with your theme, whether in light or dark mode. The use of CSS variables and the @apply directive from Tailwind CSS makes the styles easy to manage and update. If you have any questions or improvements, feel free to comment below!

Happy coding! 🎨✨

[MJUrian-Learner]

Thi

Tailwind CSS Autofill and Scrollbar Styling with ShadCN and Dark/Light Mode If you're using ShadCN and implementing dark and light modes in your project, you might have encountered issues with the background color of autofilled input fields. Here's a solution that worked for me, along with custom scrollbar styling.

the solution:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 256 58% 99%;
    --foreground: 256 56% 1%;
    --muted: 16 30% 87%;
    --muted-foreground: 16 10% 39%;
    --popover: 256 58% 99%;
    --popover-foreground: 256 56% 1%;
    --card: 256 58% 99%;
    --card-foreground: 256 56% 1%;
    --border: 256 10% 91%;
    --input: 256 10% 91%;
    --primary: 256 61% 79%;
    --primary-foreground: 256 61% 19%;
    --secondary: 16 61% 79%;
    --secondary-foreground: 16 61% 19%;
    --accent: 136 61% 79%;
    --accent-foreground: 136 61% 19%;
    --destructive: 0 88% 27%;
    --destructive-foreground: 0 88% 87%;
    --ring: 256 61% 79%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 256 55% 3%;
    --foreground: 256 14% 100%;
    --muted: 16 30% 13%;
    --muted-foreground: 16 10% 61%;
    --popover: 256 55% 3%;
    --popover-foreground: 256 14% 100%;
    --card: 256 55% 3%;
    --card-foreground: 256 14% 100%;
    --border: 256 10% 10%;
    --input: 256 10% 10%;
    --primary: 256 61% 79%;
    --primary-foreground: 256 61% 19%;
    --secondary: 16 61% 79%;
    --secondary-foreground: 16 61% 19%;
    --accent: 136 61% 79%;
    --accent-foreground: 136 61% 19%;
    --destructive: 0 88% 53%;
    --destructive-foreground: 0 0% 100%;
    --ring: 256 61% 79%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply antialiased bg-background text-foreground scroll-smooth;
  }

  ::selection {
    @apply bg-primary text-background;
  }

  ::-webkit-scrollbar {
    @apply w-2 h-2;
  }

  ::-webkit-scrollbar-track {
    @apply bg-muted;
  }

  ::-webkit-scrollbar-thumb {
    @apply rounded-full bg-muted-foreground;
  }

  input:-webkit-autofill,
  textarea:-webkit-autofill,
  select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px hsl(var(--background)) inset !important;
    box-shadow: 0 0 0 1000px hsl(var(--background)) inset !important;
    -webkit-text-fill-color: hsl(var(--foreground)) !important;
  }
}

Root Variables for Light Mode: In the :root selector, I've defined various CSS variables for colors and styles that apply to light mode. These include --background, --foreground, and other utility colors.

Dark Mode Variables: For dark mode, the same variables are redefined under the .dark class. This allows for easy toggling between light and dark modes by simply adding or removing the .dark class on the root element.

Base Layer Styles: I've applied some basic styles using Tailwind CSS's @apply directive. This includes setting border colors, body styles, text selection styles, and custom scrollbar styles.

Autofill Input Styling: The styles for input:-webkit-autofill, textarea:-webkit-autofill, and select:-webkit-autofill ensure that autofilled inputs match the theme's background and text color. The -webkit-box-shadow and box-shadow properties are used to override the default autofill background with the custom --background color.

Custom Scrollbar: I've customized the scrollbar's width, track color, and thumb color for a more cohesive look that matches the theme. This setup ensures that your autofill inputs and scrollbars remain consistent with your theme, whether in light or dark mode. If you have any questions or improvements, feel free to comment below!

1. Root Variables for Light Mode:

• In the :root selector, various CSS variables are defined for colors and styles that apply to light mode. These variables, such as --background, --foreground, and others, are used throughout the stylesheet to ensure consistency. Using CSS variables makes it easy to manage and change theme colors from a single place.

2. Dark Mode Variables:

• For dark mode, the same variables are redefined under the .dark class. This approach allows for easy toggling between light and dark modes by adding or removing the .dark class on the root element. The colors are adjusted to be suitable for dark backgrounds, ensuring good contrast and readability.

3. Base Layer Styles:

• Basic styles are applied using Tailwind CSS's @apply directive. These include setting border colors, body styles, text selection styles, and custom scrollbar styles. The @apply directive allows you to use Tailwind's utility classes within your CSS, which helps maintain a consistent design system.

4. Autofill Input Styling:

• The styles for input:-webkit-autofill, textarea:-webkit-autofill, and select:-webkit-autofill ensure that autofilled inputs match the theme's background and text color. The -webkit-box-shadow and box-shadow properties are used to override the default autofill background with the custom --background color. This is important because browsers typically change the background color of autofilled inputs, which can clash with your theme. By using hsl(var(--background)), the autofill background color is set to match the theme's background, ensuring a seamless appearance.

5. Custom Scrollbar:

• Custom scrollbar styles are defined using pseudo-elements ::-webkit-scrollbar, ::-webkit-scrollbar-track, and ::-webkit-scrollbar-thumb. These styles make the scrollbar's width, track color, and thumb color consistent with the theme. The @apply directive is used here to apply Tailwind's utility classes for width, background color, and border-radius, making the scrollbar look more integrated with the overall design.

6. Applying the text-input Class:

• The .text-input class is defined to apply autofill styles. This class can be added to input fields to ensure consistent styling for autofilled fields. You can use autofill:text-input class to ensure the text color and background color are applied only on browser autofill.

This setup ensures that your autofill inputs and scrollbars remain consistent with your theme, whether in light or dark mode. The use of CSS variables and the @apply directive from Tailwind CSS makes the styles easy to manage and update. If you have any questions or improvements, feel free to comment below!

Happy coding! 🎨✨

This doesnt work for me, it doesnt apply on my input

[DoZ1rN]

To apply the styling correctly, make sure to use the class/className 'autofill:text-input' for autofill-specific styles, or 'text-input' to apply the style permanently. Ensure these classes are set directly on the input element you want to style. This should address the issues you're experiencing.