셀렉트 박스(<select>)에 플레이스 홀더(placeholder) 기능 추가하기

<input> 요소에 있는 플레이스홀더 기능은 입력 필드에 입력해야 하는 내용에 대한 가이드를 제공해주는 중요한 기능을 합니다.

이용자의 입력 실수를 방지해 줄 수 있기 때문에 웹폼을 작성할 때는 필수로 사용해야 하는 속성입니다.

 

셀렉트 박스(<select>)에는 플레이스 홀더 기능이 없습니다.

그래서 플레이스 홀더 비슷한 기능을 하는 편법을 이용해 구현합니다.

편법이지만 실제 플레이스 홀더처럼 동작하기 때문에 이질감 없이 사용할 수 있는 장점이 있습니다.

 

일반적인 셀렉트 박스로 만든 목록은 다음과 같습니다.

선택 가능한 옵션 항목들이 목록으로 표시되고, 첫 번째 옵션 항목이 선택되어 대표 항목으로 보입니다.

 

<select name="car">
  <option value="avante">아반테</option>
  <option value="sonata">쏘나타</option>
  <option value="santafe">싼타페</option>
  <option value="grandeur">그렌져</option>
</select>

 

이 셀렉트 박스에 플레이스 홀더 기능을 만들어 붙여 보겠습니다.

먼저 기본 셀렉트 박스에 플레이스 홀더 용으로 사용하기 위한 값이 없는 빈 옵션 항목을 하나 추가합니다.

표시 텍스트도 플레이스 홀더 표시용 텍스트로 추가합니다.

 

플레이스 홀더 텍스트가 기본 선택되어 대표 항목으로 표시되도록 기본 선택 속성(selected)도 부여합니다. 기본 선택 속성은 현재 상태에서는 굳이 없어도 되지만, 뒷부분에서 기능 구현에 필수적으로 필요합니다.

 

<select name="car">
  <option value="" selected>차종선택</option>
  <option value="avante">아반테</option>
  <option value="sonata">쏘나타</option>
  <option value="santafe">싼타페</option>
  <option value="grandeur">그렌져</option>
</select>

 

기능적으로는 그럴듯하지만 이 선택 태그는 문제가 한가지 있습니다.

플레이스 홀더용 옵션 항목이 기본 선택 상태이기 때문에 자바스크립트로 별도의 폼 요소 체크 기능을 구현하지 않은 경우 값이 없는 셀렉트 박스 항목이 그대로 전송됩니다. 

선택 항목을 선택하지 않았는데도 폼이 전송되는 것은 문제가 되므로 선택 태그의 값을 선택하지 않으면 폼이 전송되지 않도록 required 속성을 셀렉트 박스 태그에 추가합니다.

 

<select name="car" required>
  <option value="" selected>차종선택</option>
  <option value="avante">아반테</option>
  <option value="sonata">쏘나타</option>
  <option value="santafe">싼타페</option>
  <option value="grandeur">그렌져</option>
</select>

 

여기까지 만들면 기본적인 플레이스 홀더로서의 기능은 잘 동작합니다.

 

조금 더 세련되게 진짜 플레이스 홀더처럼 동작하도록 플레이스 홀더 역할을 하는 속성에 disabled 속성을 추가하고 다음 CSS를 추가합니다.

 

<select name="car" required>
  <option value="" disabled selected>차종선택</option>
  <option value="avante">아반테</option>
  <option value="sonata">쏘나타</option>
  <option value="santafe">싼타페</option>
  <option value="grandeur">그렌져</option>
</select>

 

select option[value=""][disabled] {
	display: none;
}

 

기능상의 차이는 뒤에서 설명하고 CSS에서 핵심이 되는 것은 "display: none;" 속성입니다.

CSS 선택자에 매칭된 플레이스 홀더용 옵션 항목에 적용되면 옵션 목록에는 표시되지 않지만, 기본 선택된 항목에는 플레이스 홀더용 옵션  텍스트가 표시됩니다.

 

 

단순하지만 이렇게 되는 이유를 이해해야 합니다.

"disabled" 속성에 CSS로 감춤 속성을 적용했기 때문에 목록에서는 플레이스 홀더용 옵션 항목은 보이지 않습니다.

그리고, 셀렉트 박스의 기본 선택된 항목 표시는 "selected" 속성이 있는 옵션 항목의 텍스트를 가져와 표시하기 때문에 플레이스 홀더용 옵션 항목의 텍스트가 표시되게 됩니다.

 

두 속성은 관련이 없고 개별적으로 동작하기 때문에 옵션 목록에는 보이지 않지만, 기본 선택된 옵션 텍스트 표시는 감추어진 플레이스 홀더용 옵션 텍스트가 표시되게 됩니다.

 

이렇게 콤팩트하게 셀렉트 박스를 구현하면 좁은 모바일 환경에서도 편하게 대응을 할 수 있는 양식을 작성할 수 있습니다.

 

덤으로 셀렉트 박스에서 옵션을 선택하지 않았을 때 구분이 되어 표시되도록 하려면 다음 CSS를 추가해주면 됩니다.

셀렉트 박스의 선택 값이 유효하지 않으면 텍스트 컬러를 빨간색으로 적용하는 CSS입니다.

앞에서 만든 플레이스 홀더용 옵션 항목에 "selected" 속성이 적용되어 있기 때문에 선택 값이 "" 이어서 기본 상태가 인밸리드(:invalid) 상태가 됩니다.

 

select:invalid{
	color: #a00;
}

 

따라서 기본 선택 상태인 셀렉트 박스는 다음처럼 빨간색으로 표시되게 됩니다.