placeholder 속성 수정하기

 

Input 요소나 Textarea에 가이드 텍스트를 제공할 때 아주 손쉽게 사용할 수 있는 게 html5 속성 중 placeholder속성입니다. 아주 예전에는 크로스 브라우징을 위해 스크립트를 이용하여 구현을 많이 했지만 요즘은 placeholder속성을 기본적으로 사용하는것 같습니다.

 

다만 이렇게 편리한 placeholder기능을 우리가 CSS로 수정하고 싶을 때 CSS에서 요소를 바로 수정해 보면 수정이 되지 않는 걸 알 수 있습니다. placeholder 속성의 컬러값을 바꾸고 싶으면 웹킷 전용 속성을 CSS에 사용해 주어야 하며 placeholder 속성은 IE 9 이상부터 정상적으로 지원합니다.

 

/* 웹킷 전용 속성 */
input::-moz-input-placeholder {}
input::-webkit-input-placeholder {}