Autofill input in dark mode using Tailwind-PHP Chinese Network Q&A

Article Topic Learning Download Q&A Programming Dictionary Game Recent Updates

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW)

Autofill input in dark mode using Tailwind

P粉745412116 2023-08-28 08:34:43

377

<p>After using dark mode to fill in remembered passwords, I encountered an issue with the input colors being ugly. In light mode it's yellow, which is not bad. </p> <p>I found some answers here using <code>webkit-autofill</code> but I am having trouble using tailwind <code>dark: </code> prop and <code>global.scss</ I'm having trouble implementing it in sass in the code> file. </p>

P粉745412116

reply all(1)

P粉9981006482023-08-29 00:49:23 1 floor

The solution is to add this to the global.scss file:

@layer components {
  .inputDarkModeOverride {
    &:-webkit-autofill {
      box-shadow: 0 0 0 30px #1c1c1d inset;
    }

    &:-webkit-autofill:hover {
      box-shadow: 0 0 0 30px #1c1c1d inset;
    }

    &:-webkit-autofill:focus {
      box-shadow: 0 0 0 30px #1c1c1d inset;
    }

    &:-webkit-autofill:active {
      box-shadow: 0 0 0 30px #1c1c1d inset;
    }
  }
}

Then add className={`${styles.input} dark:inputDarkModeOverride`} in the input attribute.