::placeholder

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

::placeholder CSS 의사 요소는 <input> 혹은 <textarea> 요소 안에 있는 플레이스홀더 텍스트를 나타냅니다.

시도해보기

::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">이메일 주소</label>
<span id="user-email-hint" class="input-hint">예시: [email protected]</span>
<input
  id="user-email"
  aria-describedby="user-email-hint"
  name="email"
  type="email" />

윈도우 고대비 모드

플레이스홀더 텍스트는 윈도우 고대비 모드가 렌더될 때, 사용자가 입력한 텍스트 콘텐츠와 동일한 스타일로 나타납니다. 이는 일부 사용자들에게 어떠한 콘텐츠가 입력되었는지, 그리고 어떤 콘텐츠가 플레이스홀더인지 쉽게 구별할 수 없게 만듭니다.

라벨

플레이스홀더는 <label> 요소의 대체 요소가 아닙니다. for 와 id 속성을 조합하여 프로그래밍 방식으로 입력 필드와 연결된 라벨이 없으면, 스크린 리더와 같은 보조 기술이 <input> 요소를 해석할 수 없습니다.

예제

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

아래 예제는 플레이스홀더 텍스트의 일부 스타일을 변경하는 방법을 설명합니다.

HTML

html
<input placeholder="이곳에 입력하세요." />

CSS

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

결과

불투명한 텍스트

일부 브라우저 (Firefox 등)에서는 플레이스홀더의 opacity 를 100%보다 낮게 설정합니다. 만일 완전히 불투명하게 설정하고 싶다면 opacity 를 1 로 설정합니다.

HTML

html
<input placeholder="기본 불투명도" />
<input placeholder="완전한 불투명도" 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

같이 보기