select에 대한 간단한 질문이 있습니다!

Question

'상담구분' 아래 입력 박스 맨 오른쪽에 아래를 향한 화살표가 있는데 이 화살표를 조금 왼쪽으로 이동 시킬 수 있는 방법이 있을까요..?

Answer

select를 커스텀 CSS로 바꾸는게 꽤 번거로운 작업입니다.

그래도 꼭 하시겠다면 아래 코드처럼 하시면 가능합니다.

select {

appearance: none; /* html의 기본적인 디자인 없애기 */

-webkit-appearance: none; /* Vendor Prefix */

-moz-appearance: none; /* Vendor Prefix */

background: url('arrow.png') no-repeat center right 20px; /* 기존의 우측 화살표를 배경 이미지로 대체 */

}

select도 input 처럼 :before :after를 가질 수 업게 때문에 포트어썸 등 아이콘을 사용하시려면 select를 div 감싸서 그 div에 :before :after를 사용하셔야 합니다.

Answer

정말 빠른 답변과 자세하게 알려주셔서 너무나도 감사드립니다!🙏