[CSS] selectBox 화살표 바꾸기

selectBox 화살표 디자인을 없앤 후, 내가 원하는 svg 이미지를 배경으로 설정하는 방식으로 변경할 수 있다.

 

1. selectBox 화살표 없애기

 

selectbox style에 해당값을 부여하여 디자인 속성을 없앤다.

appearance:none;

 

 

2. 화살표 svg 이미지 삽입하기

 

background 속성으로 화살표 이미지를 추가한다.

이미지는 url로 삽입하며 상대경로를 활용하여 이미지 경로를 추가한다.

 

아이콘 반복형식으로 배경이 지정되지 않도록 no-repeat 속성을 함께 부여한다.

 

또한 아이콘 위치 및 크기를 함께 정의하면 끝!

background:url('../icon/my-arr.svg') no-repeat 97% 50%/20px;