how to remove the outline and box shadow on input tag in react-select

Question

I want to remove the blue outline and box-shadow when the input tag is active.

Answer 1

The box shadow is introduced by @tailwindcss/forms plugin. Default strategy for the forms plugin is to globally apply styles on form elements.

You can change this by specifying a different strategy for the plugin in tailwind.config.js file.

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

But now you would have to apply form-[inputType] classes on all form elements you want styled with @tailwindcss/forms plugin.

Here's more on this: https://github.com/tailwindlabs/tailwindcss-forms#using-only-global-styles-or-only-classes

Answer 2

You need to pass custom styles prop.

Something like this

const customStyles = {
    control: (base, state) => ({
      ...base,
      height: "100%",
      minHeight: "100%",
      border: 0,
      boxShadow: "none",
    }),
    dropdownIndicator: (base, state) => {
      return {
        ...base,
      };
    },
    placeholder: (base, state) => ({
      ...base,
    }),
    singleValue: (base, state) => ({
      ...base,
    }),
    option: (base, state) => ({
      ...base,
    }),
  };


return (
  <Select 
   //REST OF YOUR PROPS
   styles={customStyles}
   isSearchable={false}   //This gets rid of the default cursor
  /> 
)

Try playing around with the customStyles object to style it further :)

Answer 3

The default styles are derived from a theme object, which you can mutate like styles.

The theme object is available for the styles functions as well.

    <Select
        label="Single select"
        options={user}
        theme={theme => ({
          ...theme,
          borderRadius: 'none',
          colors: {
            ...theme.colors,
            primary25: 'primary',
            primary: 'neutral5',
          },
        })}
      />

Answer 4

const style = { control: base => ({ ...base, border: 0, boxShadow: 'none' }) };

Answer 5

Old question but the blue outline is a drop-shadow on the input field itself (at least was in my case), I ended up just adding a custom class to the select field like

<ReactSelect
    title = { __( 'Title', 'lang' ) }
    className = { 'your-custom-class' }
...

and then styling it out with

.your-custom-class input {
    box-shadow: none;
}

Answer 6

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

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