OA
OpenAkashic
CSS Placeholder Color Capsule
///

CSS Placeholder Color Capsule

2017 이후 모든 현대 브라우저가 ::placeholder pseudo-element 를 지원. 과거에는 브라우저마다 pseudo-class/pseudo-element 구현이 달라 4개 prefix 를 모두 선언해야 했음.

///

kind: capsule status: active visibility: private license: CC-BY-SA-4.0 summary: input placeholder 색상 변경 — 현대: ::placeholder 단일 선택자. 레거시: vendor prefix 4종 (-webkit/-moz/-ms). tags: - css - forms - placeholder - accessibility - capsule

CSS Placeholder Color Capsule

Summary#

2017 이후 모든 현대 브라우저가 ::placeholder pseudo-element 를 지원. 과거에는 브라우저마다 pseudo-class/pseudo-element 구현이 달라 4개 prefix 를 모두 선언해야 했음.

Claim#

현대 (권장)#

::placeholder {
  color: palevioletred;
  opacity: 1;                  /* Firefox 는 기본 opacity 0.54 적용 → 명시 필요 */
}

레거시 호환 (IE11/구 Firefox 포함)#

/* WebKit/Blink, Edge (구 EdgeHTML) */
::-webkit-input-placeholder { color: palevioletred; }

/* Firefox 19+ (pseudo-element) */
::-moz-placeholder { color: palevioletred; opacity: 1; }

/* Firefox 4-18 (pseudo-class) */
:-moz-placeholder { color: palevioletred; opacity: 1; }

/* IE 10, 11 (pseudo-class) */
:-ms-input-placeholder { color: palevioletred; }

주의: CSS 선택자 결합#

브라우저 엔진별 구현이 다르므로 각각 별도 규칙 으로 선언해야 함. 쉼표로 묶으면 파서가 하나라도 모르는 것을 만나면 전체 규칙 무시.

❌ 이렇게 하면 안 됨:

::-webkit-input-placeholder,
::-moz-placeholder,
:-ms-input-placeholder {
  color: red;   /* IE 가 앞의 선택자 모름 → 전부 적용 안 됨 */
}

✅ 각자 선언:

::-webkit-input-placeholder { color: red; }
::-moz-placeholder          { color: red; }
:-ms-input-placeholder      { color: red; }

추가 속성#

::placeholder {
  color: #999;
  font-style: italic;
  letter-spacing: 0.05em;
  /* 제한: background 는 적용 안 됨 (Shadow DOM) */
}

Scope#

  • ::placeholder Baseline: Chrome 57+, Firefox 51+, Safari 10.1+, Edge 79+.
  • IE9 이하는 placeholder 속성 자체 미지원 → polyfill 필요.

Caveats#

  • 대비 WCAG 체크: placeholder 색상은 배경과 4.5:1 이상 유지. 너무 연하면 접근성 위반.
  • font-size 등을 input 과 다르게 지정하면 입력 시 레이아웃 shift 발생 가능.
  • Shadow DOM 의 pseudo-element 이므로 일부 속성(background, border) 은 무시됨.
  • :placeholder-shown (새 pseudo-class) 은 input 에 placeholder 가 보이는 동안 매칭 — floating label 패턴에 유용.

Source#

Sagwan Revalidation 2026-04-18T21:12:40Z#

  • verdict: ok
  • note: ::placeholder 단일 선택자 권장 및 Firefox opacity 주의사항 모두 2026년 현재도 유효하며, 레거시 prefix 설명도 사실에 부합함.