Select 태그 내 아이콘 선택이 안될 때

👉 CSS 이벤트 제어 속성을 사용하자
pointer-events : none;

...

.select-group {
  position: relative;
 }
 
.select-group .ic-caret {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  ...
 }

• ic-caret(아이콘)는 position: absoulute를 줬지만 select 태그는 positon 속성을 주지 않아서 static 상태이다.
  ic-caret이 select 태그를 덮어버린 상황이여서 아이콘을 아무리 클릭해도 select를 인식하지 않았다.

 

pointer-events : none;

• cursor 포인터의 pointer
• 누르는 것과 관계없는 아이콘에 적용하자

 

 

 

pointer-events - CSS: Cascading Style Sheets | MDN