React-Select Remove focus border

Question

i cant figure out how do i remove border or outline ( not sure which one it is ) from react select, when its focused.

Uploaded image for reference. I have no border by default.

customStyle = {      
        control: provided => ({
            ...provided,           
            height: 10,
            width: 300,
            padding: 10,
            margin: 0,
            marginLeft: 0,
            border: "0px solid black",
            fontSize: 13,
            backgroundColor: 'white',
            outline: 'none'            
        })
    }  

Thanks

Guyguyana

Please add a relevant code snippet. There are already tons of examples of how to hide a border or outline #1458349 – Cabotage

@Cabotage There is realy no relevant code snippet for this i think. I need help removing border / outline specificaly from focused state of React-Select component. I have no idea what to select or how to adjust style options. I have went over all documenation and all topics i could find on this. But this is definitely not question about removing simple outline/border from normal component. – Guyguyana

People, don't do this please—you'll end up excluding people relying on visual focus cues when using your interfaces (e.g. using keyboard nav). The only time you should do this is when you want to replace the focus styles with your own – Halibut

Answer 1

React-select v3

const style = {
  control: base => ({
    ...base,
    border: 0,
    // This line disable the blue border
    boxShadow: 'none'
  })
};

Here a live example

React-select v2

To reset border when Select is focused you have two solutions:

1. Use the state

   control: (base, state) => ({
       ...base,
       border: state.isFocused ? 0 : 0,
       // This line disable the blue border
       boxShadow: state.isFocused ? 0 : 0,
       '&:hover': {
          border: state.isFocused ? 0 : 0
       }
   })
   

2. Use !important (this one works but I recommend to use the first solution, !important is never a good thing to employ)

   control: base => ({
      ...base,
      border: '0 !important',
      // This line disable the blue border
      boxShadow: '0 !important',
      '&:hover': {
          border: '0 !important'
       }
   })
   

Don't forgot to reset the boxShadow (blue border) that you get.

Here a live example.

Barbellate

This solution is a bit excessive (although working), it is sufficient to use boxShadow: 'none' – Pilcomayo

@AlexDobrushskiy depending your version of react-select, removing just the box-shadow with none is not working (specially in early v2) – Barbellate

@AlexDobrushskiy I have edited my answer for newer version of react-select – Barbellate

Would it make sense to add a disclaimer at the beginning of this answer to tell developers they shouldn't do this, unless they're replacing the focus styles by their own? This is an accessibility issue – Halibut

Answer 2

This worked for me:

control: (base, state) => ({
    ...base,
    border: '1px solid black',
    boxShadow: 'none',
    '&:hover': {
        border: '1px solid black',
    }
})

This will ensure the border remains when inactive, hovered or active but there is no blue box shadow.

Vowell

Answer 3

For anyone using react-select with @tailwindcss/forms, the dreaded blue line aka box-shadow on the input is introduced by the forms plugin. You need to pass strategy: class to the forms plugin in tailwind.config.js file.

plugins: [
  ...
  require('@tailwindcss/forms')({
    strategy: 'class',
  }),
]

More on this here: https://github.com/tailwindlabs/tailwindcss-forms#using-only-global-styles-or-only-classes

Similar question: https://mcmap.net/q/296854/-how-to-remove-the-outline-and-box-shadow-on-input-tag-in-react-select

Edmundoedmunds

thank heavens for you, @Akshay. This is exactly what I needed – Bignonia

Answer 4

This one is definitely working:

const style = {
    control: (base) => ({
      ...base,
      boxShadow: "none"
    })
}

Nikethamide

Answer 5

I have tried a lot! and finally This one worked for me.

control: (provided) => ({
...provided,
border: 0,
outline: '1px solid white',

}),

Tiffany

Answer 6

This removes the thickness of the box-shadow, and removes the blue from the border.

const controlStyle = base => ({
    ...base, 
    boxShadow: "none", 
    borderColor: "#cccccc",
    "&:hover": {
        borderColor: "#cccccc"
    }
})

Unsettle

Answer 7

Lord in heaven we needed:

import AsyncSelect from "react-select/async";

<AsyncSelect
  onChange={(v) => {
    props.onChange(v);
  }}
  
  {/* ... */}
  
  styles={{
    control: (base, state) => ({
      ...base,
      "*": {
        boxShadow: "none !important",
      },
    })
  }}
/>

Calgary

Answer 8

Another approach of Akshay Kumar's awnser that worked for me:

input[id^="react-select-"] {
  @apply focus:outline-none focus:border-transparent focus:ring-0;
}

Bargeboard

Answer 9

Rather than remove it you might want to change the color this is how you might go about this V3 ReactSelect

      styles = {{
        control: (baseStyles, state) => ({
          ...baseStyles,
          borderColor: state.isFocused ? 'limegreen' : 'red',
          boxShadow: state.isFocused ? '0 0 0px 4px rgba(255, 0, 0, 1)' : 'none',
          '&:hover': {
            borderColor: 'limegreen'
          }
        }),
      }}

Rochellerochemont

Answer 10

This worked for me

styles={{
            control: (base) => ({
              ...base,
              zIndex: 9999,
              border: "1.5px solid #c9ccd0",
              boxShadow: "none !important",
              "*": {
                boxShadow: "none !important",
              },
              "&:hover": {
                border: "1.5px solid #7e22ce !important",
              },
            }),
          }}

Bordeaux

Answer 11

 styles={{
                          control: (base, state) => ({
                            ...base,
                            border: "none",
                            boxShadow: "none",
                            "&:hover": {
                              border: "none",
                            },
                          }),
                        }}

Prejudge