web-dev-qa-db-fra.com

React-Select Supprimer la bordure de focus

je n'arrive pas à comprendre comment puis-je supprimer la bordure ou le contour (je ne sais pas lequel il s'agit) de React Select, lorsqu'il est concentré.

Image téléchargée pour référence. Je n'ai pas de bordure par défaut . 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'            
        })
    }

Merci

cssreactjsreact-select
10
CosmicSeizure

Pour réinitialiser la bordure lorsque Select est focalisé, vous avez deux solutions:

  1. Utilisez le 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. Utilisation !important (celui-ci fonctionne mais je recommande d'utiliser la première solution, !important n'est jamais une bonne chose à employer)

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

N'oubliez pas de réinitialiser le boxShadow (bordure bleue) que vous obtenez.

Ici un exemple en direct .

18
Laura

Cela a fonctionné pour moi:

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

Cela garantira que la bordure reste inactive, survolée ou active, mais il n'y a pas d'ombre de boîte bleue.

1
Jeff S.