Unexpected blue border while typing text react-select

user_8730140 0
Viewed 710

There is an unexpected blue border when I type text. Please check the image. I tried editing control styles by setting border zero or none and even removed boxShadow. But nothing works. Please check the image.

control: (provided) => ({ ...provided, boxShadow: 'none', border: 0, }),
react-select reactjs
2 Answers

I found the issue. I was using one tailwind plugin tailwindcss-forms. It overrides the default behavior of some inputs. So there are 2 solutions to this.

  1. Remove plugin from tailwind.congif.js file. Bascially remove this line require('@tailwindcss/forms').
  2. If you want to keep this plugin. Add this into your parent css file. e.g. index.css. input[type='text']:focus { box-shadow: none; }
user_87301400

If you want to specifically modify react-select input style while keep using the tailwindcss-forms, you can use classNamePrefix props.

<Select
    classNamePrefix="select2-selection"
    ...
/>

Then in your index.css file, add this:

.select2-selection__input:focus {
    box-shadow: none;
}

This will change the input style specific for react-select component.

user_191794170
Related