크롬 브라우저의 드롭다운 아이콘

크롬 브라우저의 <select> 드롭다운 아이콘

사파리 브라우저의 드롭다운 아이콘

사파리 브라우저의 <select> 드롭다운 아이콘

<select> 요소는 <option>과 함께 사용하여 옵션을 선택할 수 있는 드롭다운을 표시한다. <select> 우측에 있는 드롭다운 화살표 아이콘은 브라우저마다 스타일이 조금씩 다르다. 어떤 브라우저에서든 똑같은 아이콘으로 표시하고 싶다면 background 스타일 속성을 이용해서 변경할 수 있다.

<label for="select-device">Select your device</label>
<select id="select-device">
	<option value="apple">Apple</option>
	<option value="oppo">Oppo</option>
	<option value="xiaomi">Xiaomi</option>
</select>

appearance 속성 수정

appearance CSS 속성은 운영체제의 테마를 기반으로 하는 UI 컨트롤의 기본 외형(appearance)을 제어할 때 사용한다. appearance: none 속성을 적용하면 input progress 등의 요소가 기본적으로 가지는 스타일을 해제할 수 있다. select 요소에 사용하면 우측 화살표 아이콘이 사라진다.

select[id="select-device"] {
	height: 2.5rem;
	width: 10rem;
	padding: 0 0.5rem;
  color: black;
  border: 1px solid lightgray;

	-moz-appearance: none; /* Firefox */
	-webkit-appearance: none; /* Safari and Chrome */
	appearance: none;
}

요소에 속성을 적용한 화면. 우측 화살표가 사라졌다.

<select> 요소에 appearance: none 속성을 적용한 화면. 우측 화살표가 사라졌다.

background 속성 수정

background-image 속성을 이용해 <select> 태그의 배경 이미지를 화살표 아이콘으로 설정한다.

select[id="select-device"] {
	background-image: url("<https://img.icons8.com/ios-filled/50/sort-down.png>");
	background-repeat: no-repeat;
	background-position: 96% center;
	background-size: 1rem;
}

요소 배경에 화살표 이미지를 적용한 화면

<select> 요소 배경에 화살표 이미지를 적용한 화면