:placeholder-shown

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-shown CSS 의사 클래스 는 현재 플레이스홀더 텍스트를 표시 중인 모든 <input> 또는 <textarea> 요소를 나타냅니다.

시도해보기

구문

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

예제

기본 예제

이 예제는 플레이스홀더가 나타날 때 특별한 글꼴과 테두리 스타일을 적용합니다.

HTML

html
<input placeholder="아무 내용이나 입력하세요!" />

CSS

css
input {
  border: 1px solid black;
  padding: 3px;
}

input:placeholder-shown {
  border-color: teal;
  color: purple;
  font-style: italic;
}

결과

문자열 넘침

폼 필드가 너무 작으면 플레이스홀더 텍스트가 바람직하지 않은 방식으로 잘릴 수 있습니다. text-overflow 속성을 사용하여 넘치는 문자열이 표시되는 방식을 변경할 수 있습니다.

HTML

html
<input id="input1" placeholder="이름, 등급 그리고 일련번호" /> <br /><br />
<input id="input2" placeholder="이름, 등급 그리고 일련번호" />

CSS

css
#input2:placeholder-shown {
  text-overflow: ellipsis;
}

결과

사용자 정의 입력 필드

다음 예제는 사용자 정의 스타일로 학생의 고유번호 필드를 강조합니다.

HTML

html
<form id="test">
  <p>
    <label for="name">학생 이름을 입력하세요:</label>
    <input id="name" placeholder="학생 이름" />
  </p>
  <p>
    <label for="branch">학생부를 입력하세요:</label>
    <input id="branch" placeholder="학생부" />
  </p>
  <p>
    <label for="sid">학생 고유번호를 입력하세요:</label>
    <input
      type="number"
      pattern="[0-9]{8}"
      title="8 digit ID"
      id="sid"
      class="studentid"
      placeholder="8자리 고유번호" />
  </p>
  <input type="submit" />
</form>

CSS

css
input {
  background-color: #e8e8e8;
  color: black;
}

input.studentid:placeholder-shown {
  background-color: yellow;
  color: red;
  font-style: italic;
}

결과

명세서

Specification
HTML
# selector-placeholder-shown
Selectors Level 4
# placeholder-shown-pseudo

브라우저 호환성

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
:placeholder-shown
Support on non-type="text" elements (such as type="number" or type="time")

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Uses a non-standard name.
Has more compatibility info.

See also