[html css] select에 [appearance] 속성으로 화살표 지우고 이미지 넣기

 

appearance: none;

요소의 자체구성 요소 숨김

 

select 태그의 css 내용에 사용 하면 원래 화살표를 지워준다. 

지워진 select박스의 화살표

대신 사용할 이미지는 배경으로 깔아서 넣어줌

배경으로 작은 이미지를 넣어주면 공간만큼 반복되므로 no-repeat 속성을 넣어서 한번만 나오도록 해준다.

뒤에 %로 위치 선정

ex) 100% 50%

100% (가로 위치)가장 오른쪽  50% (상하 위치) 가운데

백그라운 사이즈를 조절해서 대신할 이미지 크기 변경.

 

가장오른쪽 상하 가운데 백그라운드 이미지로 넣은 화살표