# CSS - placeholder 색상 변경하는 방법

placeholder 자체는 색상을 바꿀수 없고, CSS 가상 선택자를 선택해야 한다.

 

예를들어 input박스일 경우

input::placeholder {
  color: #c8c8c8;   /* 원하는 색상 */
  opacity: 1;    /* 브라우저 기본 투명도 제거 */
}

이런식으로 색상변경이 가능하다.

 

textarea일 때

textarea::placeholder {
  color: red;
}

 

브라우저 호환성 때문에 아래처럼 벤더 프리픽스도 같이 쓰는 경우가 있다.

input::-webkit-input-placeholder { color: #999; }
input:-moz-placeholder { color: #999; }
input::-moz-placeholder { color: #999; }
input:-ms-input-placeholder { color: #999; }

 

하지만 요즘은 ::placeholder 하나만 써도 최신 브라우저는 거의 다 지원한다.