Select2 선택 드롭다운 메뉴: 텍스트와 겹치는 아이콘 지우기

Question

선택 메뉴에 마우스를 올리면 X '지우기' 버튼 아래에 텍스트가 겹치는 문제가 발생합니다. 오른쪽에 패딩을 추가하는 것은 아이콘을 상자 밖으로 밀어내기 때문에 해결책이 아닙니다. 저는 https://select2.org/ 및 Bootstrap 5

에 있는 Select2 JS 라이브러리를 사용하고 있습니다.

으아아아 으아아아

Answer 1

다음 CSS를 추가하세요.

으아아아

https://jsfiddle.net/8n23bd6q/

Answer 2

여기에서 문서를 따르세요. Select2 Documentation. width: 'style' 和标签 <select> 中的内联样式来扩展 select2 宽度。这里我将select的宽度设置为200px

를 사용할 수 있습니다.

그런 다음 Chrome Devtool을 사용하여 select2의 DOM 구조를 살펴보면서 다음 CSS를 추가하면 X 버튼이 텍스트와 겹치지 않게 만들 수 있다는 것을 발견했습니다.

으아아아

으아아아 으아아아 으아아아