::placeholder 가상 요소 사용법

::placeholder 가상 요소는
placeholder 속성이 지정된 HTML 입력 컨트롤 요소의 placeholder 텍스트를 스타일링하는 데 사용되는 선택자입니다.

::placeholder 가상 요소를 사용하여 placeholder 텍스트의 색상, 글꼴, 크기, 굵기, 가로 정렬 등을 스타일링할 수 있습니다.

HTML 
<input type="text" placeholder="placeholder text">
CSS 
input::placeholder {
    color: blue;
    font-size: 1.2em;
    font-style: italic;
    font-weight: bold;
    text-align: center;
}
실제 적용된 모습

알아두세요! placeholder 텍스트의 기본 색상은 대부분의 브라우저에서 밝은 회색입니다.

::placeholder 가상 요소는 placeholder 텍스트가 표시되는 동안만 스타일링됩니다. 위 예제에서는 placeholder 텍스트의 가로 가운데 정렬도 지정되는 것을 볼 수 있습니다.
텍스트가 입력되면 ::placeholder 가상 요소는 더 이상 스타일링되지 않습니다.

::placeholder 가상 요소의 형식은 다음과 같습니다.

구문

CSS 
::placeholder {
    /* ... */
}

::placeholder 가상 요소가 지원하는 스타일 속성

주의하세요!
아래의 지원하는 스타일 속성은 완벽하지 않습니다. 브라우저별로 지원하는 스타일 속성을 다를 수 있습니다. 이는 브라우저별 정책에 따라 달라질 수 있다는 의미로, 명세서에서는 지원하는 스타일 속성이 명시되어 있지 않습니다.

  • font 관련 속성들
  • color
  • background관련 속성들
  • text-align
  • word-spacing
  • letter-spacing
  • opacity
  • ...

opacity 조정 - Firefox 브라우저

일부 브라우저(특히 Firefox)에서는 placeholder 텍스트의 opacity 값을 1 미만으로 설정해 놓았습니다. 완전히 불투명하게 하려면 opacity의 값을 1로 설정하면 됩니다.

CSS 
::placehoder {
    opacity: 1;
}
실제 적용된 모습

브라우저 호환성

::placeholder 가상 요소의 브라우저 호환성
선택자
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
::placeholder 57 79 51 10.1

caniuse.com에서 더 자세한 정보를 확인해 보세요.

명세서

::placeholder 가상 요소의 명세서 사양
명세서 사양
::placeholder CSS Pseudo-Elements Module Level 4
#placeholder-pseudo

참고문헌

같이 보기