Logo

CSS 드롭다운 스타일링 가이드 - (HTML <select> 요소)

드롭다운(dropdown), 리스트박스(listbox), 콤보박스(combobox), 등 여러 가지 이름으로 불리우는 HTML의 <select> 엘리먼트와 CSS를 이용하여 아래와 같이 만들어보겠습니다.

HTML 작성

사실 웹에서 드롭다운를 구현하는 방법은 여러 가지가 있지만, 본 포스팅에서는 가장 기본적인 HTML의 <select> 엘리먼트를 사용하도록 하겠습니다. 웹 접근성(accessibility)을 위해서 <label> 엘러먼트도 추가한 후에 <select> 엘리먼트와 연결을 해줍니다. 이렇게 해주면 <label> 영역뿐만 아니라 <label> 영역을 선택했을 때도, 동일하게 초점(focus)을 받게 됩니다.

선택 사항은 <option> 엘리먼트를 이용해서 <select> 엘리먼트의 자식으로 추가해주면 되고, <optgroup> 엘리먼트로 분류도 해줄 수 있습니다.

<form>
  <label for="fruit"> 좋아하는 과일 </label>
  <select id="fruit" name="fruit">
    <option value="">-- 선택하세요 --</option>
    <optgroup label="여름">
      <option value="strawberry">딸기</option>
      <option value="banana">바나나</option>
    </optgroup>
    <optgroup label="여름">
      <option value="mango">망고</option>
      <option value="melon">멜론</option>
      <option value="grape">포도</option>
      <option value="watermelon">수박</option>
    </optgroup>
    <optgroup label="가을">
      <option value="apple">사과</option>
      <option value="pear">배</option>
    </optgroup>
    <optgroup label="겨울">
      <option value="mandarine">귤</option>
    </optgroup>
  </select>
</form>

디폴트 스타일 제거

대부분의 브라우저는 User Agent Style이라고 불리는 디폴트(default) 스타일을 <select> 엘리먼트에 적용해줍니다. 아이러니하게도 커스텀 스타일을 적용할 때는 이러한 브라우저 별로 조금씩 상이한 이 디폴트 스타일이 걸림돌이 되곤 합니다.

select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}

위와 같이 appearance 속성을 사용해서 이러한 브라우저에서 디폴트로 제공하는 스타일을 제거합니다.

기본 스타일링

폰트, 여백, 색상, 테두리와 같은 기본적인 스타일을 <select> 엘리먼트에 적용합니다.

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap");

select {
  /* 생략 */
  font-family: "Noto Sansf KR", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;

  color: #444;
  background-color: #fff;

  padding: 0.6em 1.4em 0.5em 0.8em;
  margin: 0;

  border: 1px solid #aaa;
  border-radius: 0.5em;
  box-shadow: 0 1px 0 1px rgba(0, 0, 0, 0.04);
}

상태 스타일링

<select/> 엘리먼트는 hover, focus, disabled와 같은 상태를 가질 수 있습니다. 상태에 따라 약간의 시각적인 변화를 주면 보다 긍정적인 사용자 경험을 제공할 수 있습니다.

select:hover {
  border-color: #888;
}

select:focus {
  border-color: #aaa;
  box-shadow: 0 0 1px 3px rgba(59, 153, 252, 0.7);
  box-shadow: 0 0 0 3px -moz-mac-focusring;
  color: #222;
  outline: none;
}

select:disabled {
  opacity: 0.5;
}

전체 코드

마치면서

HTML의 <select> 엘리먼트는 전통적으로 CSS로 스타일하기에는 한계가 있고, 스타일링이 난해한 것으로 알려져왔습니다. 내부에 있는 <option> 엘리먼트에 스타일을 적용할 수 없기 때문에, 브라우저의 영향을 크게 받을 수 밖에 없기 때문입니다.

하지만 <select> 엘리먼트를 사용하지 않고, 웹 접근성(accessibility)을 준수하는 커스텀 드롭다운을 구현하는 것도 만만치 않게 어려운 일입니다. 다행히 최근에는 IE가 거의 사장되어 가는 분위기이고, 대부분의 브라우저가 <select> 엘리먼트를 거의 비슷하게 처리를 해주고 있습니다.

관련해서 좋은 영문 포스팅가 있어서 소개드리니 참고하셔서 <select> 엘리먼트를 잘 활용하실 수 있으셨으면 좋겠습니다.

This work is licensed under CC BY 4.0

messageCircle