아이콘에 가려져서 클릭되지 않는 문제 해결하기

개발을 하다보면 디자이너나 클라이언트의 요구사항을 만족시키기 위해 기본 input 태그나 select 태그 등을 커스텀 해야하는 경우가 많다.

문제

커스텀 select 태그를 만들어서 아이콘도 img 태그를 사용하여 추가해주었다.

하지만, select 태그 내부의 icon을 클릭하게 되면 select 태그가 열리지 않는 불편함이 있다.

해결

아이콘에 pointer-events:none; 속성을 추가한다.

.custom-select {
  width: 200px;
  position: relative;

  select {
    width: 100%;
    height: 24px;
  }
}

.select-icon {
  position: absolute;
  top: 5px;
  right: 5px;
  pointer-events: none;
}

• 이렇게 하면 아이콘을 클릭해도 select 태그가 클릭된 것처럼 제대로 동작한다.