select drop down css 커스텀 예시

미리보기

 

<!-- relative : absolute 개수에 맞춰서 ~ absolute 태그를 자식으로 포함하고 있어야 함 -->
  <div class="relative">
    <div
      class="flex border border-gray-200 text-gray-400 cursor-pointer rounded-md items-center gap-3"
      (click)="isMenuOpen = !isMenuOpen"
    >
      <div class="text-sm py-3 pl-4">메뉴를 검색해주세요</div>
      <div class="py-2.5 pr-4">
        <!-- transition-all : 조건 충족 시 아이콘 180도 회전 -->
        <app-icon
          name="material-symbols:keyboard-arrow-down"
          class="w-6 h-6 transition-all"
          [ngClass]="{'rotate-180': isMenuOpen}"
        ></app-icon>
      </div>
    </div>
    <!-- flex-col gap : 요소 사이 거리 -->
    <!-- overflow-y-scroll : y축 스크롤 생성 , hidden : 기능도 있음 -->
    <div
      *ngIf="isMenuOpen"
      class="flex flex-col overflow-y-scroll absolute border rounded-md p-2 bg-white z-10 w-full max-h-60 gap-0.5"
    >
      <!--relative : absolute 위치를 결정하기 위한 기준 위치-->
      <div class="relative">
        <!-- input w-full 부모 요소의 크기만큼만 차지 하기 위해 크기 조절 (축소)-->
        <input
          class="border w-full pr-10 py-2 rounded-md border-gray-200"
        />
        <!-- 아이콘 absolute 위치 -->
        <div class="absolute right-4 top-1/2 -translate-y-1/2">
          <img src="\assets\icon\search.png" class="w-4 h-4" />
        </div>
      </div>

      <div
        *ngFor="let item of mockItems"
        class="cursor-pointer w-full"
      >
        <div class="py-2.5 pl-3 hover:bg-gray-100 rounded-md">
          {{item}}
        </div>
      </div>
    </div>
  </div>

1. 검색 돋보기 넣기 : 부모 태그에 relative 명시 후 돋보기 img에 absolute 속성 및 rigt 로 위치 선정

2. 검색어 입력 시 돋보기와 글씨가 겹치지 않게 하기 위해 input 태그 안에 pr pl 패딩 주기

3. 스크롤바 y 축만 생성되도록 내부 w 길이가 더 작도록 설정하기

4. 스크롤바 x 축은 가리도록 over-flow-x-hidden

5. input 최대 길이 설정 시 길이를 줄이기 위해, 자기 부모 태그의 길이를 취하기 위해 w-full

6. absolute 를 사용하여 돋보기 마크를 인풋에 넣기

7. transition-all 을 활용하여 특정 조건 시 [ngClass] rotate 180 되도록 수정

 

 

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: rgb(229, 231, 235);
}

::-webkit-scrollbar-thumb {
  background: red;
  border-radius: 4px;
}

4. 스크롤바 커스텀 css