-1

In the snippet attached the input field has red background. Try entering saved data and its background will default to light bluish color. How can I stop it from defaulting to sky blue while maintaining the functionality of entering saved data?

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

<input name="title" id="title" type="text" placeholder="Enter a title here." class="focus:border-transparent focus:ring-0 ring-0 border-transparent focus:border-red-300 required:border-red-500 invalid:border-red-500 p-2 sm:p-4 w-full text-xl sm:text-2xl mt-2 shadow-md bg-red-400 placeholder-white transition-all">
Ali Mustafa
  • 676
  • 3
  • 14

1 Answers1

1

As stated here: https://stackoverflow.com/a/14205976/21232878 by Fareed you can do it by setting inset box-shadow with no blur

so in your case, add this to your CSS

/* Change the input to any CSS selector you like */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 40px rgb(30 41 59/var(--tw-bg-opacity inset !important;
}
Omri Levy
  • 21
  • 3