선택 필드 및 옵션 스타일 지정

Question

옵션이 많은 다중 선택 필드가 있는데 긴 항목 목록을 표시하는 대신 작은 덩어리로 표시하고 싶습니다. "options"를 "display: inline-block"으로 설정하면 이 작업을 수행할 수 있지만 옵션이 컨테이너 경계에 도달하면 두 번째 줄로 들어가지 않고 컨테이너 뒤에 숨겨지는 문제가 있습니다.

여기서 볼 수 있듯이 마지막 항목을 잘라내고 다음 항목은 모두 보이지 않습니다.

으아악

옵션을 컨테이너 뒤에 전달하는 대신 두 번째 줄에 전달하는 방법이 있나요?

Answer 1

컨테이너에 스타일을 지정하면 display: flex 和 flex-wrap:wrap; 컨테이너 너비에 도달하면 옵션이 자동으로 다음 줄 제한으로 줄바꿈됩니다.

업데이트된 CSS 코드는 다음과 같습니다.

으아악

Answer 2

select 요소로는 이 작업을 수행할 수 없는 것 같습니다. 필드 구조를 "select>options"에서 "ul>li>checkbox" 로 변경하여 상자와 각 li li 스타일을 원하는 대로 지정할 수 있었습니다. "appearence: none"을 사용하여 확인란을 숨긴 후 결과는 선택한 것과 동일합니다.