React-Select Удалить границу фокуса

Question

Я не могу понять, как я могу удалить границу или контур (не уверен, какой это) от реакции выбора, когда он сфокусирован.

Загруженное изображение для справки. У меня нет границы по умолчанию.

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

Спасибо

Answer 1

Сбросить границу, когда Select У вас есть два решения:

1. Использовать state

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

2. использование !important (это работает, но я рекомендую использовать первое решение, !important это никогда не хорошая вещь для работы)

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

Не забыл сбросить boxShadow (синяя рамка), которую вы получаете.

Вот живой пример.

Answer 2

Это сработало для меня:

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

Это гарантирует, что граница останется, когда она неактивна, зависла или активна, но не будет тени синего поля.

Answer 3

Для тех, кто используетreact-selectс@tailwindcss/forms, страшная синяя линия, также известная как box-shadow на входе, представлена ​​​​плагином форм. Вам нужно пройтиstrategy: classк плагину форм вtailwind.config.jsфайл.

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

Подробнее об этом здесь: https://github.com/tailwindlabs/tailwindcss-forms#using-only-global-styles-or-only-classes

Аналогичный вопрос: https://stackoverflow.com/a/75541836/5712125

Answer 4

Это определенно работает:

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

Answer 5

Я много пробовал! и, наконец, это сработало для меня.

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

}),

Answer 6

Это удалит толщину box-shadow и уберет синий цвет с границы.

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

Answer 7

Господи на небесах нам нужно было:

      import AsyncSelect from "react-select/async";

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

Answer 8

Еще один подход awnser Акшая Кумара, который сработал у меня:

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

Answer 9

Вместо того, чтобы удалять его, вы можете изменить цвет, вот как вы можете сделать это 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'
          }
        }),
      }}