CSS 플레이스홀더(placeholder) 스타일 정의하기

입력 가능한 필드, 또는 선택 가능한 폼 요소에 가이드 텍스트를 표시하는 플레이스홀더(Placeholder) 는 HTML 에서는 태그 속성으로 표현을 하지만, CSS 입장에서는 가상 요소(Pseudo Element) 입니다.

따라서 CSS에서 플레이스홀더에 접근하려면 가상 요소 선택자를 이용해 접근해야 합니다.

다음과 같은 입력 요소의 플레이스홀더에 접근하려면

<input name="userid" size="12" maxlength="20" placeholder="아이디">

다음처럼 가상 요소 선택자를 이용해 접근할 수 있습니다.

가상 요소 선택자로 선택한 플레이스홀더는 HTML 텍스트에 적용하는 텍스트 스타일 속성을 그대로 사용할 수 있습니다.

input[name=userid]::-ms-input-placeholder { /* 인터넷 익스플로러 */
  color: #a00;
  font-size: 0.9375em;
}
input[name=userid]::placeholder {
  color: #a00;
  font-size: 0.9375em;
}

인터넷 익스플로러는 벤더 프리픽스를 사용해 "-ms-input-" 를 추가해 별도로 정의해야 호환성이 보장됩니다.