How can I overwrite styles of an autofilled input when using Chakra UI?

user_9099891 0
Viewed 1287

I'm styling my inputs inside Chakra UI's extendTheme function however I'm struggling to style an input that has been autocompleted. Using the :autofill pseudo selector doesn't seem to have any bearing because the browser (Chrome) has its own styles set with !important which forces the input's background colour to be white.

const theme = extendTheme({
  components: {
    Input: {
      baseStyle: {
         field: {
            bg: "gray.700",
            color: "gray.300",
            _hover: {
              bg: "gray.500",
            },
            _focus: {
              bg: "gray.500",
            },
            // This does not work
            _autofill: {
              bg: "gray.500",
            }
         }
      }
    }
  }
})
chakra-ui emotion google-chrome css
2 Answers

Just incase anyone has the same issue, I couldn't figure out how to override the default browser background-color, so instead I gave it a box-shadow value that creates a similar effect. Box-shadow is not set by the browser's autofill styles so this works well for my case.

const theme = extendTheme({
  components: {
    Input: {
      baseStyle: {
         field: {
            bg: "gray.700",
            color: "gray.300",
            _hover: {
              bg: "gray.500",
            },
            _focus: {
              bg: "gray.500",
            },
            _autofill: {
              border: "1px solid transparent",
              textFillColor: "#c6c6c6",
              boxShadow: "0 0 0px 1000px #232323 inset",
              transition: "background-color 5000s ease-in-out 0s",
            },
         }
      }
    }
  }
})
user_90998910

As TommyR's answer explains, this is currently broken in Chakra UI.

However, this does work in variants.

A somewhat clean fix would be to create a variant for this, and set it as a defaultProp:

Input: {
  variants: {
    backgroundFix: {
      field: {
        bg: "green.500",
      },
    },
  },
  defaultProps: {
    variant: "backgroundFix",
  },
},

If wanted, you could extend other existing variants, like so:

Input: {
  variants: {
    outlineBackgroundFix: (props) => ({
      field: {
        ...defaultTheme.components.Input.variants.outline(props).field,
        bg: props.colorMode === "light" ? "white" : "gray.800",
      },
    }),
  },
  defaultProps: {
    variant: "outlineBackgroundFix",
  },
},
user_42121530
Related