[Html] select element 에서 dropdown icon 바꾸는 방법

Intro

안녕하세요. select element 에서 dropdown icon 바꾸는 방법에 대해 알아보도록 하겠습니다 :) 

 

How to solve problem

<select class="custom-select">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

/* Hide the default dropdown arrow */
.custom-select {
  appearance: none; /* For Firefox */
  -webkit-appearance: none; /* For Chrome, Safari, Opera */
  -moz-appearance: none; /* For Firefox */
  background-image: url('custom-dropdown-icon.png'); /* Custom arrow icon */
  background-position: right center;
  background-repeat: no-repeat;
  padding-right: 20px; /* Adjust according to your icon's width */
}

/* Style the dropdown icon */
.custom-select::-ms-expand {
  display: none; /* For IE 11 */
}

 

• appearance: none;, webkit-appearance: none;, moz-appearance: none 속성을 사용해서 default dropdown arrow를 숨겨줍니다. 
• background-image 속성을 통해 커스텀 하고자 하는 icon을 넣어줍니다. 
• background-position, background-repeat, padding-right 을 사용하여 arrow icon 위치를 조정해줍니다. 
• IE11 브라우저에서 ::-ms-expand 를 사용하여 default arrow를 숨깁니다.