목록드랍다운 (1)

깜놀하는 해므찌로

select drop down css 커스텀 예시

메뉴를 검색해주세요 {{item}} 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-scrollb..
IT 2023. 6. 15. 17:53
이전 Prev 1 Next 다음