web-dev-qa-db-ja.com

React-Selectフォーカス境界線の削除

フォーカスされたときに、反応選択から境界線またはアウトラインを削除する方法がわかりません（どちらであるかはわかりません）。

参照用にアップロードされた画像。デフォルトでは境界線がありません。 enter image description here

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

ありがとう

cssreactjsreact-select
10
CosmicSeizure

Selectにフォーカスがあるときに境界線をリセットするには、2つの解決策があります。

  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（青い枠線）をリセットすることを忘れないでください。

ここでは、 実例 です。

18
Laura

これは私のために働いた：

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

これにより、非アクティブ、ホバー、またはアクティブのときに境界線が維持されますが、青いボックスの影はありません。

1
Jeff S.