Can't remove input border style. | Next.js | Page 1

gilded plover Jun 14, 2025, 1:05 PM

#

I've been using this trick in all of my Next.js projects and it works fine. This time it doesn't.

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 {
  background-color: transparent !important;
  -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
  -webkit-text-fill-color: inherit !important;
  transition: background-color 5000s ease-in-out 0s !important; 
}

I honestly don't know why. The difference between this project and other projects is that this project has next-mdx and tailwind-typography.

However, I tried using the component (with that input field) outside mdx files but the border still persists.
Any ideas?

dull caveBOT Jun 14, 2025, 1:05 PM

#

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

gilded plover Jun 14, 2025, 1:39 PM

#

Gosh I found the culprit
I forgot to put

    input, textarea, select {
        outline: none;
    }

In the base layer

#Can't remove input border style.