How can i remove outline/border

[MuttakinHasib]

Hey, I want to disable this blue color border in the container & input field when it focused.

how can I solve this with styles props?

[Rall3n]

Hello @MuttakinHasib,

I hope you don't mind me converting your issue to a discussion. Questions like this are better asked here.

---

You can remove the border around the component using react-selects styling framework.

You have to remove both borderColor and boxShadow from the styles and overwrite the borderColor attribute with either the default or a custom color. The same has to be done for the :hover state.

<Select
   styles={{
    control: ({ borderColor, boxShadow, ...provided }, { theme }) => ({
      ...provided,
      borderColor: theme.colors.neutral20,
      '&:hover': {
        borderColor: theme.colors.neutral30
      }
    })
  }}
/>

Regarding the outline around the <input>: This is not something added through react-select by default and is most likely something added by either you yourself or your browser.

But you can remove that most likely using the same steps as above but for the input instead of the control key.

<Select
   styles={{
    input: (provided) => ({
      ...provided,
      'input': {
        outline: 'none !important'
      }
    })
  }}
/>

[MuttakinHasib]

Thanks ❤️