::placeholder

::placeholder CSS 의사 요소는 <input> 혹은 <textarea> 요소 내의 placeholder text를 나타냅니다.

시도해보기

::first-line 의사 요소에 적용된 CSS 속성의 하위 집합만이 ::placeholder 와 해당 선택자를 사용하는 규칙에 사용될 수 있습니다.

참고: 많은 브라우저에서, 플레이스홀더 텍스트의 외형은 기본적으로 반투명하거나 옅은 회색의 색상을 가집니다.

구문

css
::placeholder {
  /* ... */
}

접근성 고려사항

색상 대비

대비 비율

플레이스홀더 텍스트는 일반적으로 더 밝은 색상으로 처리되어 어떤 종류의 입력이 유효한지에 대해 제안하며, 이는 실제 입력된 값이 아님을 보여줍니다.

인풋의 배경 색상과 플레이스홀더 텍스트 사이의 색상 대비 비율을 충분히 높이는 것은 중요합니다. 낮은 시력을 가진 사람이 이를 읽을 수 있도록 해야 하며, 동시에 사용자가 플레이스홀더 텍스트를 입력된 데이터로 착각하지 않도록 플레이스홀더 텍스트와 인풋 텍스트 사이에 색상 차이가 충분히 존재해야 합니다.

색상 대비 비율은 플레이스홀더 텍스트와 인풋의 배경 색상 값의 밝기를 비교하여 결정되어야 합니다. 웹 콘텐츠 접근성 가이드라인 (WCAG)을 충족시키기 위해서는, 텍스트 콘텐츠에는 4.5:1의 비율이 요구되고 머릿말 같은 큰 텍스트는 3:1 의 비율이 요구됩니다. 큰 텍스트는 18.66px의 굵은 글씨체 혹은 24px 이상으로 정의됩니다.

사용성

충분한 색상 대비를 가진 플레이스홀더 텍스트는 입력된 값으로 해석될 수도 있습니다. 플레이스홀더 텍스트는 사용자가 <input> 요소에 콘텐츠를 입력할 때 사라집니다. 이 두 가지 상황은 낮은 인지력을 가진 사람에게는 성공적인 폼 작성에 방해가 될 수도 있습니다.

플레이스홀더의 정보를 제공하는 대신에 사용할 수 있는 대안 접근은 인풋 외부에 시각적으로 가까운 위치에 포함시키고, aria-describedby 를 사용하여 프로그래밍 방식으로 <input> 요소와 해당 힌트를 연결하는 것입니다.

이 구현을 통해 인풋에 정보가 입력되어도 힌트 내용이 계속 제공되며, 페이지가 로드될 때 인풋에는 사전 입력된 내용이 없이 나타나게 됩니다. 대부분의 스크린 리더 기술은 aria-describedby 를 사용하여 입력란의 라벨 텍스트가 발표된 후 힌트를 읽어주며, 스크린 리더 사용자가 추가 정보를 불필요하다고 생각하면 이를 음소거할 수 있습니다.

html
<label for="user-email">Your email address</label>
<span id="user-email-hint" class="input-hint">Example: jane@sample.com</span>
<input
  id="user-email"
  aria-describedby="user-email-hint"
  name="email"
  type="email" />

윈도우 고대비 모드

플레이스홀더 텍스트는 윈도우 고대비 모드에서 렌더링될 때 유저가 입력한 것과 동일한 스타일을 가집니다. 이는 일부 사람들로 하여금 어떤 콘텐츠가 입력된 것인지, 어떤 콘텐츠가 플레이스홀더인지 구분하기 어렵게 만들 수 있습니다.

라벨

플레이스홀더는 <label> 요소의 대체제가 아닙니다. for 와 id 특성의 조합을 사용하여 인풋과 프로그래밍 방식으로 연결된 라벨이 없다면 스크린 리더와 같은 보조 기술이 <input> 요소를 파싱할 수 없습니다.

예제

플레이스홀더의 외형 변경하기

이 예제는 플레이스홀더 텍스트의 스타일을 조정할 수 있는 방법에 대해 소개합니다.

HTML

html
<input placeholder="Type here" />

CSS

css
input::placeholder {
  color: red;
  font-size: 1.2em;
  font-style: italic;
}

결과

불투명한 텍스트

몇몇의 (파이어폭스와 같은) 브라우저 에서는 플레이스홀더의 opacity 기본값을 100% 보다 낮게 설정합니다. 만일 플레이스홀더의 텍스트를 불투명하게 만들고 싶다면 opacity 를 1 로 설정하세요.

HTML

html
<input placeholder="Default opacity" />
<input placeholder="Full opacity" class="force-opaque" />

CSS

css
::placeholder {
  color: green;
}

.force-opaque::placeholder {
  opacity: 1;
}

결과

명세서

Specification
CSS Pseudo-Elements Module Level 4
# placeholder-pseudo

브라우저 호환성

BCD tables only load in the browser

같이 보기