반응-선택 포커스 테두리 제거

반응-선택 포커스 테두리 제거

초점이 맞춰져 있을 때 반응 선택에서 테두리 또는 윤곽(어느 것인지 확실하지 않음)을 제거하는 방법을 알 수 없습니다.

참조용 이미지를 업로드했습니다.기본적으로 테두리가 없습니다.

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

감사해요.

반응 선택 v3

const style = {
  control: base => ({
    ...base,
    border: 0,
    // This line disable the blue border
    boxShadow: 'none'
  })
};

여기 실제 예가 있습니다.

리액트 선택 v2

다음과 같은 경우에 테두리를 재설정하려면Select에는, 다음의 2개의 솔루션이 있습니다.

1. 를 사용합니다.state

   control: (base, state) => ({
       ...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 => ({
      ...base,
      border: '0 !important',
      // This line disable the blue border
      boxShadow: '0 !important',
      '&:hover': {
          border: '0 !important'
       }
   })
   

리셋하는 것을 잊지 마세요.boxShadow(파란 테두리)를 표시합니다.

여기 실제 예가 있습니다.

이 방법은 효과가 있었습니다.

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

이렇게 하면 비활성화, 정지 또는 활성 상태에서도 테두리가 유지되지만 파란색 상자 그림자가 나타나지 않습니다.

이건 확실히 효과가 있어요.

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

나는 많은 노력을 했고, 마침내 이것은 나에게 효과가 있었다.

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

}),

그러면 상자 그림자의 두께가 제거되고 테두리에서 파란색이 제거됩니다.

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

언급URL : https://stackoverflow.com/questions/52614304/react-select-remove-focus-border