<option> 태그 CSS 스타일링하기

HTML의 <select> 태그안에서 쓰이는 <option> 태그는 HTML과 browser에서 담당하는 친구가 아니라 사용되는 OS에서 그려주는 친구이기 때문에 CSS로 스타일링이 불가능하다.

그래서 예쁜 Select 컴포넌트를 만들고 싶다면 HTML 태그들을 이용하지 않고 직접 Select 컴포넌트처럼 보이게 코드를 짜고, 스타일링을 해주면 된다.

1<div class="selectBox">
2  <button class="label">fruits 🍊</button>
3  <ul class="optionList">
4    <li class="optionItem">apple</li>
5    <li class="optionItem">orange</li>
6    <li class="optionItem">grape</li>
7    <li class="optionItem">melon</li>
8  </ul>
9</div>