How can I change inputs focus styles?

Last updated February 15, 2024

Change focus styles of a single input

To change focus styles of a single input, use Styles API:

TextInput with custom focus styles

.input {
  &:focus {
    outline: rem(2px) solid var(--mantine-primary-color-filled);
  }
}

To change focus styles of all inputs, use Styles API with Input component in the theme object:

Text input

Native select

.input {
  &:focus {
    outline: rem(2px) solid var(--mantine-primary-color-filled);
  }
}